1.视口
viewport就是浏览器显示页面内容的屏幕区域。可以分为布局视口、视觉视口、理想视口。
布局视口（layout viewpoint）
为了解决早期pc端页面的手机显示，一般将这个视口设为980px。使得pc网页能在手机上，只不过元素看起来很小。通过自行缩放网页浏览。
视觉视口（visual viewpoint）
用户能看到网站的区域。要左右滑动才能看全
理想视口（ideal viewport）
又能看全页面也能有合适的大小。
通过meta视口标签通知浏览器操作。使布局视口与设备理想视口的宽度一致。
<meta name="viewport" content="width=device-width, initail-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no>
2.物理像素与物理像素比
物理像素即屏幕分辨率，实际屏幕上的像素值。
在我们开始时的1px不是一定等于1物理像素。
PC端是1px为1物理像素。
在iphone8 1px为2物理像素。其物理像素比即是2/1=2
不同设备物理像素比不同。
3.二倍图
在一张50x50的图片放在手机浏览器中会放大两倍，导致图片变模糊。使用倍图的方式来解决。给一个100x100的图片，把图片缩小到50x50。则放大也不会模糊。
4.背景图片
background-size:cover 保持长宽比完全覆盖背景DIV。可能有图片显示不全。
background-size:contain 保持长宽比拉伸至高或宽覆盖div。可能有背景空白
5.移动端特殊样式
a标签点击出现背景高亮
-webkit-tap-hightlight-color:transparent;
去除按钮默认外观，去除后才能自定义样式
-webkit-appearance： non
禁用长按页面弹出菜单
img,a {-webkit-touch-callout: none;}
给body设置最大最小宽度
min-width: 320px
max-width: 640px
京公网安备 11010502036488号