2017-11-27(移动端自适应)

lib.flexible库---移动端自适应

 lib.flexible库是淘宝用来解决移动端适配的,建议在lib.flexible中对js做内联处理,在所有资源加载之前执行这个js,在执行这个js之后,会在(document.documentElement)上增加一个data-dpr属性和font-size样式,之后页面中的元素都会用rem单位来设置.而html上的font-size就是rem的基准像素,js会根据不同的设备添加不同的data-dpr值,这样的话,页面中的元素,都可以通过rem单位来设置,他们会根据html元素的font-size值做相应的计算,从而实现屏幕的适应效果.

利用meta标签对viewport进行控制

 一般我们在进行移动端开发的时候,在文档开头都会加上这么一句:

 <meat  name = "viewport"  content = "width = device - width , initial - scale = 1,maximum - scale = 1,user -scalable = no">

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放,允不允许用户缩放不同的网站有不同的要求,但让viewpoort的宽度等于设备的宽度,这个应该是我们想要的效果,