移动端使用rem同时适应安卓ios手机原理解析，移动端响应式开发

Posted 2020-09-20 科比net

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中会得心应手