web前端崔永键微官网项目-饭满屋移动端

崔永健

2019.09.27

71人浏览

利用rem布局,在短时间内进行快速移动端布局,完成整套项目。同时参考jQuery-mobile和hello mui等一些框架中好的结构想法

rem是CSS3新增的一个相对单位(root em,根em)。这个单位与em有什么区别呢?

区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-

scale=1.0, maximum-scale=1.0, user-scalable=no" />  

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0:表示初始的缩放比例

minimum-scale=1.0:表示最小的缩放比例

maximum-scale=1.0:表示最大的缩放比例

user-scalable=no:表示用户是否可以调整缩放比例


动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值,进而达到高清效果。

web前端崔永键微官网项目-饭满屋移动端

web前端崔永键微官网项目-饭满屋移动端

web前端崔永键微官网项目-饭满屋移动端


崔永健    545 天津市红桥区 设计师杨冰是女孩 1992.06.08
设计师啪啪网2019版