大年初四写了个移动端的页面，当时css的东西都忘记的差不多了，很久不去用的东西就会忘记，所以写下来是个好习惯，便于以后快速查询，同时也思路的整理和加强。
移动设备上和pc上的不同在于显示的尺寸，现在的移动设备像素密度很高，如果浏览器将css样式中的1px显示为一个物理像素点的话，就会太小看不清。name=”viewport”的meta标签用于指定显示区域的像素宽度，它影响了css中px单位的实际值。
1.设置viewport
1 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
加上此meta标签后，不管设备的物理分辨率是多少，浏览器会将宽度定义为320px（类似android中的dip），也就是说在css中定义320px的宽度就会占据整个屏幕的宽度。
2.设计图和css数据值之间的关系
移动设备上网页的设计图的大小一般都是640px，设置了viewport后浏览器的宽度变为320px，因此在效果图上的尺寸都要除以2再写入到css中，包括字体也是一样的。
3.切图的大小
直接从psd中按原大小切图，不需要缩小一半，因为设置了viewport后浏览器认为宽度为320px，但实际显示的像素点不是320个点，在1080*1920的分辨上，如果css中定义宽度为320px的div的一个背景图片，实际就是满屏要1080个像素点来显示，按psd中按原大小切图，宽度为640px，如果再缩小一半则只有320px，把320px的图片放到1080上显示会发虚，所以图片一般按原大小切，图片作为背景的时候，增加属性backgroud-size:contain，让其自适应容器的大小。
再记下backgroud-size样式，语法为background-size: *px|*%|cover|contain;，如果是px或者%,第一个值表示w，第二个表示h，如果第二个值没有，则表示auto，注意，如果用%则是表示父容器的%（不是图片的%），cover和contain都会保持图片的比例，不同的是cover保证覆盖整个容器，contain保证完全显示出图片
