Open lulujianglab opened 6 years ago
我们一般写移动端页面时,为了让页面适应各个尺寸,常常会给各个元素设一个相当单位
一般常用的css单位有px,em,rem
px: 多用于pc端,精准的描述元素大小,不随屏幕大小变化而变化,也可以说是一个绝对单位
em: 相对于父元素的大小变化而变化,在嵌套层次多的情况下会导致元素大小值偏大或偏小
rem: 全名也叫font size of the root element ,即相对于根元素的大小,常用来表示移动端元素大小
最近在开发移动端页面,针对rem谈谈其心得体会
首先,在开发页面之前,我们需要给根元素赋一个font-size值,也就是rem基准值
<html style="font-size: 37.5px;">...</html>
浏览器默认的根元素font-size值是16px
为了方便计算,我们可以设置一个按屏幕大小整数倍缩放的值,比如10倍
所以,对于iphone6的屏幕宽度375px,那么我们就可以将根元素的font-size设置为37.5px,缩小10个倍数
同样的,对于iPhone5屏幕的宽度320px,缩小10倍根元素的font-size就是32px
那缩放10倍是怎么定义的呢,其实这个值是随便定义的,假如不除以10,如果是除以100,这样在设置html的font-size时候会偏小,只有3.75px或者是3.2px等等,而
假设根元素的字体设置的大小是37.5px(按iPhone6屏幕尺寸缩小10倍),设计稿的宽度是按iPhone6的屏幕宽度375px定义的,设计稿中p的大小是12px,那么p应该设置的相对字体大小是(12/37.5)rem
如果设计稿的宽度是750px,设计稿中p的大小是12px,那么p应该设置的相对字体大小是(12/75)rem
为了将各个不同屏幕宽度根元素的font-size都缩小到屏幕宽度的10倍,可以在js中动态计算出当前屏幕所适配的font-size的大小
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
或
document.documentElement.style.fontSize = innerWidth/10 + "px"
或者用媒体查询设置
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ html{font-size: 37.5px;} }
考虑到元素很多很难换算的情况,我们可以用css构建工具scss
@function px2rem($px){ $rem : 37.5px; @return ($px/$rem) + rem; }
当我们写具体的数值时,就可以写成
height: px2rem(90px); width: px2rem(90px);;
参考资料
前言
我们一般写移动端页面时,为了让页面适应各个尺寸,常常会给各个元素设一个相当单位
一般常用的css单位有px,em,rem
px: 多用于pc端,精准的描述元素大小,不随屏幕大小变化而变化,也可以说是一个绝对单位
em: 相对于父元素的大小变化而变化,在嵌套层次多的情况下会导致元素大小值偏大或偏小
rem: 全名也叫font size of the root element ,即相对于根元素的大小,常用来表示移动端元素大小
最近在开发移动端页面,针对rem谈谈其心得体会
rem使用方法
首先,在开发页面之前,我们需要给根元素赋一个font-size值,也就是rem基准值
浏览器默认的根元素font-size值是16px
rem基准值计算
为了方便计算,我们可以设置一个按屏幕大小整数倍缩放的值,比如10倍
所以,对于iphone6的屏幕宽度375px,那么我们就可以将根元素的font-size设置为37.5px,缩小10个倍数
同样的,对于iPhone5屏幕的宽度320px,缩小10倍根元素的font-size就是32px
那缩放10倍是怎么定义的呢,其实这个值是随便定义的,假如不除以10,如果是除以100,这样在设置html的font-size时候会偏小,只有3.75px或者是3.2px等等,而
浏览器的font-size如果小于12px就显示不出效果了
假设根元素的字体设置的大小是37.5px(按iPhone6屏幕尺寸缩小10倍),设计稿的宽度是按iPhone6的屏幕宽度375px定义的,设计稿中p的大小是12px,那么p应该设置的相对字体大小是(12/37.5)rem
如果设计稿的宽度是750px,设计稿中p的大小是12px,那么p应该设置的相对字体大小是(12/75)rem
动态设置html的font-size
为了将各个不同屏幕宽度根元素的font-size都缩小到屏幕宽度的10倍,可以在js中动态计算出当前屏幕所适配的font-size的大小
或
或者用媒体查询设置
rem数值计算
考虑到元素很多很难换算的情况,我们可以用css构建工具scss
当我们写具体的数值时,就可以写成
参考资料