rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢
浏览器默认的字体大小为16px 及1rem 等于 16px
如果我们想要使1rem等于 12px 只需设置html的字体大小为 12/16 及html的字体大小为font-size:75%
html {
font-size:75%; <!-- 12/16 -->
}
我们再来看一下各个浏览器的屏幕宽度
iphone4 320
iphone5 320
iphone6 375
iphone6p 414
大部分的安卓手机屏幕显示宽度为 360
我们公司的设计是以iphone6为基础设计的 及以375的为准设计的
如果想在 iphone其他版本中按iphone6比例自动缩放那么我们需要进行简单的缩放运算,同时也以1rem等于12px为例
iphone4 320/375*75% = 64%
iphone5 320/375*75% = 64%
iphone6 375/375*75% =75%
iphone6p 414/375*75% =82.8%
安卓 360/375*75% =72%
我们可以这样设置在不同媒体中的字体的rem比例 由于安卓和iphone6区别较小,所以设置时忽略其差异
html { -webkit-text-size-adjust: none; font-size:75%; height: 100%; } @media screen and (min-width: 10px) and (max-width: 320px) { html { font-size: 64%; } } @media screen and (min-width: 414px) and (max-width: 768px) { html { font-size: 82.8%; } } /*字体大小 直接换算出10到20的字体大概代表多少rem 设置字体大小直接用class代替*/ .s10{font-size:0.83rem;} .s11{font-size:0.913rem;} .s12{font-size:1rem;} .s13{font-size:1.079rem;} .s14{font-size: 1.162rem;} .s15{font-size: 1.245rem;} .s16{font-size: 1.33rem;} .s17{font-size:1.411rem ;} .s18{font-size: 1.5rem;} .s20{font-size: 1.66rem;}
用心了解以上内容在应用rem中会得心应手