rem布局实现不同分辨率移动终端的自适应、整体缩放
前言 现在手机屏幕分辨率越来越多,但我们的需求比较唯一——最佳视觉。 当用户浏览网页时,根据屏幕的尺寸,来向用户展示更适合用户的布局、文字、图片、按钮等等,因此,rem应运而生。 rem(font size of the root element)是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化,那么整个网页中运用到 rem的也会随之变化。加之当前手机淘汰速度较快,当前主流的手机内嵌浏览器内核版本均可以支持rem布局。 开撸 一般移动端的UI设计稿会采用iphone6宽度像素的尺寸作为标准——750,具体理由自行百度下,这里不再过多赘述。竖向一般不用考虑,基本是流布局,非限定一屏高度的话无影响。 本文以750设计稿为例。 第一步:设置初始rem css file: html { font-size : calc( 100 vw/ 7.5 ) ; } 说明: 100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于100px。 第二部 全局px替换为rem 替换设计稿中的px为rem,注意rem=px/100,即font-size: 12px,需要写成font-size: .12rem,其他宽度、高度、间距等同理。由于rem是相对于根节点元素大小的单位,遂当设备宽度改变时,采用rem布局的大小均会跟随相同比例变化