移动端

1.理想视口

<meta name="viewport" content="width=device-width,inital-scale=1.0,user-scale=no,maximun-scale=1.0,minimum-scale=1.0">
名字：理想视口；设备宽就是我的宽；比例1.0；不允许用户缩小扩大；最大屏幕；最小屏幕。

2.盒子模型

　　传统盒子：宽高+内外边距+边框

　　CSS3盒子：宽高

3.二倍图

　　PC端的px不等于移动端的px，PC端的1像素等于1物理像素
　　可能电脑端四个像素组成的，移动端就要由八个或者更多的像素组成，50*50的图，手机就会放大2倍100*100，造成模糊
　　一开始100*100压缩成50*50，手机再放大，就不会模糊，这就是二倍图
　　通过    background-size:宽度 高度   压缩图片像素

4.二倍精灵图做法

　　图片工具：把精灵图等比例缩为原来的一半

　　之后根据大小测量坐标,例如是200，0

　　background：url(图片路径) no-repeat  -200px 0

　　代码里面background-size：精灵图原来宽度的一半

5.定位　

父级 position: relative
子级 position: absolute
      注意子级盒子设置 margin-top: 7px;
      子级盒子的边距也会给同级盒子,需要在父级里设置隐藏溢出 overflow: hidden
　　解决一些div的布局问题

 

标签：盒子,50,像素,子级,background,100,移动
来源： https://www.cnblogs.com/black-eyes/p/14111846.html