摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：垂直居中布局解决方案1 - table-cell+vertical-align <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
阅读全文
摘要：水平居中布局 水平居中布局解决方案1-text-align <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
阅读全文
摘要：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudoclasses_and_pseudo-elements 伪类 ⽤于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据⽤户⾏
阅读全文
摘要：rem 适配方案2 手机淘宝团队出的简洁高效 移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为 10等份 ，但是不同设备下，比例还是一致的。 我们要做的，就是确定好我们当前设备的html 文字大小就可以了 比如当前设计稿是 750px， 那么我们只
阅读全文
摘要：苏宁首页 苏宁首页地址 ： "苏宁首页" 1、 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取rem适配布局（less + rem + 媒体查询） 设计图： 本设计图采用 750px 设计尺寸 2、搭建文件结构 3、设置视口标签以及引入初始化样式 4、设置公共common.less文件
阅读全文
摘要：html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
阅读全文
摘要：移动端WEB开发之响应式布局 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： + 小于768的为超小屏幕（手机） + 768~992之间的为小屏设备（平板） + 992~1200的中等屏幕（桌面显示器）
阅读全文
摘要：1、让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。 2、使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。 技术方案： 1、less+rem+媒体查询 2、fl
阅读全文
摘要：维护css弊端 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 + CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。 + 不方便维护及扩展，不利于复用。 + CSS 没有很好的计算能力 + 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组
阅读全文
摘要：什么是媒体查询 媒体查询（Media Query）是CSS3新语法。 + 使用 @media查询，可以针对不同的媒体类型定义不同的样式 + @media 可以针对不同的屏幕尺寸设置不同的样式 + 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 + 目前针对很多苹果手机、And
阅读全文
摘要：rem单位 rem (root em)是一个相对单位，类似于em， em是父元素字体大小 。 不同的是， rem的基准是相对于html元素的字体大小 。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 比如，根元素（html）设置font
阅读全文
摘要：语法1： background: linear gradient(起始方向, 颜色1, 颜色2, ...); background: webkit linear gradient(left, red , blue); background: webkit linear gradient(left t
阅读全文
摘要：移动web开发——flex布局 1.传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页
阅读全文
摘要：1.移动端单独制作 流式布局（百分比布局）【百分比%，是跟父元素相对的。】 flex 弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 2.响应式 媒体查询 bootstarp 流式布局： 流式布局，就是百分比布局，也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行
阅读全文
摘要：4.1移动端主流方案 1.单独制作移动端页面（主流） 通常情况下，网址域名前面加 m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。 也就是说，PC端和移动端为两套网站，pc端是pc端的样式，移动端再写一套，专门针对移动端适配的一套网站。 京东pc端、移动端： 2
阅读全文
摘要：移动端2倍图背景图缩放： （1）fireworks中，宽高缩放50%； （2）测量大小、坐标； （3）background-size：宽设置为和fireworks中的宽一样，高设为auto 或 省略。 3.1物理像素&物理像素比 物理像素，就是分辨率。iPhone8的物理像素是750，但是宽度为37
阅读全文
摘要：视口 ：viewport，就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS、 Android基本都将这个视口分辨率设置为
阅读全文
摘要：1.1浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手
阅读全文
摘要：浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。 1. 私有前缀 moz ：代表 firefox 浏览器私有属性 ms ：代表 ie 浏览器私有属性 webkit ：代表 safari、chrome 私有属性 o ：代表 Opera 私有属性 2. 提倡的写法 mo
阅读全文
浙公网安备 33010602011771号