如何制作移动端
名词解释:
设备像素比:非视网膜屏幕是指,屏幕可视区域宽度是320像素,就只能显示320像素的内容。视网膜屏幕是指,屏幕可视区域宽度是320像素,却能够显示640像素、960像素的内容。其中,屏幕可视区宽度叫设备独立像素,device independent pixels,简称dip或dp。屏幕能够显示的显示的实际像素数叫做物理像素。
设备像素比window.devicePixelRatio=物理像素/设备独立像素。
rem:rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。
首先是获取设备的设备像素比,根据设备像素比确定需要缩放的比例,根据缩放比例来确定窗口的宽度,根据宽度来确定rem的长度,用rem这个单位,动态调整html标签下的font-size的大小,以此来实现在移动端的自适应。
制作移动端要结合淘宝的flexible.js这个文件来解说