响应式及移动端布局
响应式页面：
根据不同的浏览器窗口大小，显示不同的样式媒体查询
@media 设备类型 and (媒体特性){}
设备类型：all/screen
and:连接符
媒体特性：视口的宽（能够看得到的区域的宽）
max-width:最大宽 视口宽度低于该值的时候
min-width:最小宽 视口宽度高于该值的时候
/* 视口宽度低于700的时候 高度变300 背景色变蓝色 */
@media all and (max-width:700px)
.box{height: 300px;background-color: blue} }
/* 视口宽度400-600的时候 高度变100 背景色变黄色 字体大小40 */
@media all and (minwidth:400px) and (maxwidth:600px
{.box{height: 100px;background-color: yellow;font-size: 40px;} }
/* 视口宽度高于100的时候 字体颜色变红色 */
@media all and (min-width:100px) { .box{color: red;} }
移动端的准备
1，视口（能够看到的区域）viewport
布局视口：css作用的区域
可视视口：能够看到的区域
完美视口：布局视口等于可视视口
initial-scale: 1;初始缩放
minimum-scale: 1; 最小缩放
maximum-scale: 1; 最大缩放
user-scalable:no/yes 用户能否缩放
2，参数（像素单位）
物理像素(ps量取的)
逻辑像素(css设置的)
dpr（逻辑像素比，是已知的）=物理像素（ps量取的值，是已知的）/逻辑像素（css值，需要知道的）
dpr的值
设计图的总宽度是320的话 drp=1
设计图的总宽度是640/750的话 drp=2
设计图的总宽度是>750 1080 drp=3
出现像素不对等的原因：pc端是量取多少写多少，但是移动端因为视网膜高清屏的出现，导致一个单位中可能会放多个像素，所以从该手机截取下来的图，再用ps量取的话，像素点会变多，导致和实际宽度不一样，所以每次设置css要先用ps量取的除以dpr的值
为了方便除以dpr可以直接在ps图像-图像大小-修改宽度为除以dpr的值
3，可变化的单位
(1)%
(2)em 1em=16px em参考的当前元素的字体大小
(3)rem 1rem=16px rem参考根元素(html)的字体大小
(4)vw(视口的宽) vh(视口的高)
1vw=视口宽的1% 1080px的设备宽 1vw=10.8px
10vw=视口宽的10% 560px的设备高10vh=56px
100vw=视口宽度的100%如果有滚动条的话100vw会拿到视口+滚动条的宽，100%只有视口的宽
1vh=视口高的1%
10vh=视口高的10%
100vh=视口高的100%
4，单位的转换
假如当前设计图宽度750 实际上 设备宽度375
100vw=375px 1rem=100px
1rem=26.667vw
假如当前设计图的宽度1242 实际设备宽度是414
100vw=414px
1rem=100px
1rem=24.115vw
最后要把得出的vw的值设置到根元素的身上，根元素跟随设备宽度变化，子元素用rem单位跟随根元素变化
注意：量取完的px还是要去除以100设置rem单位
补充属性：
补充属性
1，字体属性复合写法 font:加粗(可省略) 倾斜(可省略) 字体大小/行高 字体类型(不可省略);
2，大小写的转换 text-transform:uppercase(全部大写)/lowercase(全部小写)/capitalize(首字母大写)
3，鼠标样式 cursor:pointer(手型)/help(帮助)/wait(等待)/move(移动)权重
4，!important 最高 color: red !important;
行内 1000 id 100 class 10 标签 1 通用 0 继承 最低
5，img引入的图片自带底部大约3px的留白
<1>. img{display:block}
<2>. img{verticalalign: middle/bottom/top}
<3>. img{float:left/right}
web表现包含：结构、表现、行为
补充内容
雪碧图(精灵图)-css sprites 必须用背景图插入
雪碧图主要结合是background-position
优点(1)减少图片的体积(2)减少http的请求次数
**浏览器内核(渲染机制) **
Trident内核—代表浏览器ie浏览器
Gecko内核—代表浏览器Mozilla火狐
WebKit内核—代表浏览器苹果浏览器和谷歌旧版本
Blink内核—代表浏览器谷歌 & 欧鹏
网页头部优化
1 | <meta name="description" content="网页的描述内容"> |
常见的兼容性bug
(1)bug:透明度 opacity在谷歌和火狐都正常显示，但是在ie8及以下有问题
解决方法hack: filter:alpha(opacity=value)
(2)表单元素对齐不一致
bug:文本输入框是按标准盒模型解析，按钮是按怪异盒模型解析
解决方法hack：用同一种盒模型
(3)超链接去包裹img的时候，在ie10及以下图片会出现边框
解决方法hack:img{border:none}
grid网格
父元素
形成网格 display:grid;
网格的行 grid-template-rows
(1)有几行写几个宽度值，用空格隔开就行
(2)数值px/数值%/数值fr(份数)/repeat(次数,宽度值)
网格的列 grid-template-columns
(1)有几列写几个高度值，用空格隔开就行
(2)数值px/数值%/数值fr(份数)/repeat(次数,高度值)
划分网格区域 grid-template-areas:
(1)有几行写几组引号
(2)引号里面写每一个格子的名字用空格隔开，合并的格子用相同的名字
行间距 row-gap:数值px;
列间距 column-gap:数值px;
子元素
grid-area:区域名; 上面划分区域起好的名字，指定在该区域显示
背景图的起始显示位置 background-origin(去掉重复)
padding-box 从padding区域开始显示
border-box 从边框区域开始显示
content-box 从内容区开始显示
背景图裁切 background-clip (把重复加回来)
border-box 从边框之外被裁掉
padding-box 从padding之外被裁掉
content-box 从content之外被裁掉
