博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端网页布局适配rem方案小结
阅读量:5876 次
发布时间:2019-06-19

本文共 3270 字,大约阅读时间需要 10 分钟。

前言

根据 W3C 规范中对 1rem 的定义:

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照。

这就意味着 1rem 等于 html 元素的字体大小(大部分浏览器根元素的字体大小为16px)

兼容性

ios:6.1系统以上都支持

android:2.1系统以上都支持

大部分主流浏览器都支持,可以安心的往下看了。


rem:(font size of the root element)

意思就是根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网页的跟元素(html)来设置字体大小的,举一个简单的例子,

现在大部分浏览器IE9+,Firefox、Chrome、Safari、Opera ,如果我们不修改相关的字体配置,都是默认显示font-size是16px,即

html {    font-size:16px;}

那么如果我们想给一个P标签设置12px的字体大小,那么用rem来写就是

p {    font-size: 0.75rem; //12÷16=0.75(rem)}

使用rem这个字体单位进行适配,就是利用它作为一个全局字体固定参照单位的特性。如果改变html元素的字体大小,rem的值也就跟着改变,对应的其他使用rem的布局尺寸,也会跟着改变,从而达到适配的目的,保证比例一致。 所以rem不仅可以适用于字体,同样可以用于width height margin这些样式的单位。

rem适配具体实现方案:

设计稿尺寸宽度为750px,如果设计稿是640px,下边js会自动计算rem的值(比如rem:75px -> rem: 64px),具体的尺寸rem不用调整(例如 padding: 1.5rem,不用调整,这是一个比例大小),对应的元素大小px值会根据新的rem(比如rem: 64px, padding等于 1.5 * 64)改变,从而按照比例适配。

index.html

      
rem适配

helper.scss

$remBase: 75;$primaryColor: #ffd633;@function px2rem($px) {  @return ($px / $remBase) * 1rem;}%textOverflow {  width: 100%;  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}// @include borderLineTop('top', color)@mixin borderLine($mode: 'top', $color: #e5e5e5) {  position: relative;  @if $mode == 'top' {    &::before {      // 实现1物理像素的下边框线      content: '';      position: absolute;      z-index: 1;      pointer-events: none;      background-color: $color;      height: 1px;      left: 0;      right: 0;      top: 0;      @media only screen and (-webkit-min-device-pixel-ratio: 2) {        -webkit-transform: scaleY(0.5);        -webkit-transform-origin: 50% 0%;      }    }  }  @if $mode == 'bottom' {    &::after {      // 实现1物理像素的下边框线      content: '';      position: absolute;      z-index: 1;      pointer-events: none;      background-color: $color;      height: 1px;      left: 0;      right: 0;      bottom: 0;      @media only screen and (-webkit-min-device-pixel-ratio: 2) {        -webkit-transform: scaleY(0.5);        -webkit-transform-origin: 50% 0%;      }    }  }}@mixin borderRadius($radius) {  border-top-left-radius: px2rem($radius);  border-top-right-radius: px2rem($radius);  border-bottom-left-radius: px2rem($radius);  border-bottom-right-radius: px2rem($radius);}// @include banner(100)@mixin banner($height) {  position: relative;  padding-top: percentage($height/750); // 使用padding-top  height: 0;  overflow: hidden;  img {    width: 100%;    height: auto;    position: absolute;    left: 0;    top: 0;  }}$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 100);$sides: (top, bottom, left, right);@each $space in $spaceamounts {  @each $side in $sides {    .m-#{str-slice($side, 0, 1)}-#{$space} {      margin-#{$side}: #{px2rem($space)} !important;    }    .p-#{str-slice($side, 0, 1)}-#{$space} {      padding-#{$side}: #{px2rem($space)} !important;    }  }}.flex-center {  display: flex;  align-items: center;}@mixin font-dpr($font-size){  font-size: $font-size;  [data-dpr="2"] & {      font-size: $font-size * 2;  }  [data-dpr="3"] & {      font-size: $font-size * 3;  }}

App.vue, 使用px2rem进行转换

图片描述

转载地址:http://onkix.baihongyu.com/

你可能感兴趣的文章
jquery css3问卷答题卡翻页动画效果
查看>>
MDK5.00中*** error 65: access violation at 0xFFFFFFFC : no 'write' permission的一种解决方法
查看>>
Android 集成支付宝支付详解
查看>>
SQL分布式查询、跨数据库查询
查看>>
C#------连接SQLServer和MySQL字符串
查看>>
Arcgis Licensemanager 不能启动的原因之一(转载)
查看>>
(原)Android在子线程用handler发送的消息,主线程是怎么loop到的?
查看>>
$digest already in progress 解决办法——续
查看>>
虚拟机 centos设置代理上网
查看>>
Struts2中Date日期转换的问题
查看>>
mysql 数据类型
查看>>
Ubuntu 设置当前用户sudo免密码
查看>>
设置tomcat远程debug
查看>>
android 电池(一):锂电池基本原理篇【转】
查看>>
Total Command 常用快捷键
查看>>
ionic 调用手机的打电话功能
查看>>
怎么使用阿里云直播服务应用到现在主流直播平台中
查看>>
Xcode全局替换内容,一键Replace
查看>>
1000 加密算法
查看>>
exif_imagetype() 函数在linux下的php中不存在
查看>>