精华内容
下载资源
问答
  • 主要介绍了手机端用rem+scss适配的详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前言根据 W3C 规范中对 1rem 的定义:1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照。这就意味着 1rem 等于 html 元素的字体大小(大部分浏览器根元素的...

    前言

    根据 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适配

    var doc = win.document;

    var docEl = doc.documentElement;

    var metaEl = doc.querySelector('meta[name="viewport"]');

    var flexibleEl = doc.querySelector('meta[name="flexible"]');

    var dpr = 0;

    var scale = 0;

    var tid;

    var flexible = lib.flexible || (lib.flexible = {});

    if (metaEl) {

    console.warn('将根据已有的meta标签来设置缩放比例');

    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);

    if (match) {

    scale = parseFloat(match[1]);

    dpr = parseInt(1 / scale);

    }

    } else if (flexibleEl) {

    var content = flexibleEl.getAttribute('content');

    if (content) {

    var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);

    var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);

    if (initialDpr) {

    dpr = parseFloat(initialDpr[1]);

    scale = parseFloat((1 / dpr).toFixed(2));

    }

    if (maximumDpr) {

    dpr = parseFloat(maximumDpr[1]);

    scale = parseFloat((1 / dpr).toFixed(2));

    }

    }

    }

    if (!dpr && !scale) {

    var isAndroid = win.navigator.appVersion.match(/android/gi);

    var isIPhone = win.navigator.appVersion.match(/iphone/gi);

    var devicePixelRatio = win.devicePixelRatio;

    if (isIPhone) {

    // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案

    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {

    dpr = 3;

    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){

    dpr = 2;

    } else {

    dpr = 1;

    }

    } else {

    // 其他设备下,仍旧使用1倍的方案

    dpr = 1;

    }

    scale = 1 / dpr;

    }

    docEl.setAttribute('data-dpr', dpr);

    if (!metaEl) {

    metaEl = doc.createElement('meta');

    metaEl.setAttribute('name', 'viewport');

    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    if (docEl.firstElementChild) {

    docEl.firstElementChild.appendChild(metaEl);

    } else {

    var wrap = doc.createElement('div');

    wrap.appendChild(metaEl);

    doc.write(wrap.innerHTML);

    }

    }

    function refreshRem(){

    var width = docEl.getBoundingClientRect().width;

    if (width / dpr > 540) {

    width = 540 * dpr;

    }

    var rem = width / 10;

    docEl.style.fontSize = rem + 'px';

    flexible.rem = win.rem = rem;

    }

    win.addEventListener('resize', function() {

    clearTimeout(tid);

    tid = setTimeout(refreshRem, 300);

    }, false);

    win.addEventListener('pageshow', function(e) {

    if (e.persisted) {

    clearTimeout(tid);

    tid = setTimeout(refreshRem, 300);

    }

    }, false);

    if (doc.readyState === 'complete') {

    doc.body.style.fontSize = 12 * dpr + 'px';

    } else {

    doc.addEventListener('DOMContentLoaded', function(e) {

    doc.body.style.fontSize = 12 * dpr + 'px';

    }, false);

    }

    refreshRem();

    flexible.dpr = win.dpr = dpr;

    flexible.refreshRem = refreshRem;

    flexible.rem2px = function(d) {

    var val = parseFloat(d) * this.rem;

    if (typeof d === 'string' && d.match(/rem$/)) {

    val += 'px';

    }

    return val;

    }

    flexible.px2rem = function(d) {

    var val = parseFloat(d) / this.rem;

    if (typeof d === 'string' && d.match(/px$/)) {

    val += 'rem';

    }

    return val;

    }

    })(window, window['lib'] || (window['lib'] = {}));

    We're sorry but rem适配 doesn't work properly without JavaScript enabled. Please enable it to continue.

    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进行转换

    @import "@/assets/style/helper.scss";

    #nav {

    padding: px2rem(24);

    a {

    font-size: px2rem(24);

    font-weight: bold;

    color: #2c3e50;

    &.router-link-exact-active {

    color: #42b983;

    }

    }

    }

    bVbnLDv?w=2800&h=800

    展开全文
  • 移动 web 适配 rem.js 使用 前言 提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式...
    移动 web 适配 rem.js 使用

    前言

    提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦。

    兼容性

    先看看兼容性,关于移动端
    ios:6.1系统以上都支持
    android:2.1系统以上都支持
    大部分主流浏览器都支持,可以安心的往下看了。

    rem设置字体大小
    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这个单位来设置字体大小基本上是这个套路,好处是假如用户自己修改了浏览器的默认字体大小,那么使用rem时就可以根据用户的调整的大小来显示了。 但是rem不仅可以适用于字体,同样可以用于width height margin这些样式的单位。下面来具体说一下

    rem进行屏幕适配

    在讲rem屏幕适配之前,先说一下一般做移动端适配的方法,一般可以分为:

    1. 简单一点的页面,一般高度直接设置成固定值,宽度一般撑满整个屏幕。

    2. 稍复杂一些的是利用百分比设置元素的大小来进行适配,或者利用flex等css去设置一些需要定制的宽度。

    3. 再复杂一些的响应式页面,需要利用css3的media query属性来进行适配,大致思路是根据屏幕不同大小,来设置对应的css样式。

    上面的一些方法,其实也可以解决屏幕适配等问题,但是既然出来的rem这个新东西,也一定能兼顾到这些方面,下面具体使用rem:

    rem适配

    先看一个简单的例子:

    .con {
          width: 10rem;
          height: 10rem;
          background-color: red;
     }
    <div class="con">
            
    </div>
    

    这是一个div,宽度和高度都用rem来设置了,在浏览器里面是这样显示的, 可以看到,在浏览器里面width和height分别是160px,正好是16px * 10,那么如果将html根元素的默认font-size修改一下呢?

    html {
        font-size: 17px;
    }
    .con {
          width: 10rem;
          height: 10rem;
          background-color: red;
     }
    <div class="con">
            
    </div>
    

    再来看看结果:

    这时width和height都是170px,这就说明了将rem应用与width和height时,同样适用rem的特性,根据根元素的font-size值来改变自身的值,由此我们应该可以联想到我们可以给html设定不同的值,从而达到我们css样式中的适配效果。

    rem数值计算

    如果利用rem来设置css的值,一般要通过一层计算才行,比如如果要设置一个长宽为100px的div,那么就需要计算出100px对应的rem值是 100 / 16 =6.25rem,这在我们写css中,其实算比较繁琐的一步操作了。

    对于没有使用sass的工程:

    为了方便起见,可以将html的font-size设置成100px,这样在写单位时,直接将数值除以100在加上rem的单位就可以了。

    对于使用sass的工程:前端构建中,完全可以利用scss来解决这个问题,例如我们可以写一个scss的function px2rem即:

    @function px2rem($px){
        $rem : 37.5px;
        @return ($px/$rem) + rem;
    }
    

    这样,当我们写具体数值的时候就可以写成:

    height: px2rem(90px);
    width: px2rem(90px);
    

    看到这里,你可能会发现一些不理解的地方,就是上面那个rem:37.5px是怎么来的,正常情况下不是默认的16px么,这个其实就是页面的基准值,和html的font-size有关。

    rem基准值计算

    关于rem的基准值,也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的,主要有以下几点原因:

    1. 由于我们所写出的页面是要在不同的屏幕大小设备上运行的

    2. 所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定

    3. 假如我们拿到的视觉稿是以iphone6的屏幕为基准设计的

    4. iPhone6的屏幕大小是375px,

    rem = window.innerWidth  / 10
    

    这样计算出来的rem基准值就是37.5(iphone6的视觉稿),这里为什么要除以10呢,其实这个值是随便定义的,因为不想让html的font-size太大,当然也可以选择不除,只要在后面动态js计算时保证一样的值就可以,在这里列举一下其他手机的

    iphone3gs: 320px / 10 = 32px

    iphone4/5: 320px / 10 = 32px

    iphone6: 375px / 10 =37.5px

    动态设置html的font-size

    现在关键问题来了,我们该如何通过不同的屏幕去动态设置html的font-size呢,这里一般分为两种办法

    1. 利用css的media query来设置即

      @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
            html{font-size: 37.5px;}
      }
      
    2. 利用javascript来动态设置 根据我们之前算出的基准值,我们可以利用js动态算出当前屏幕所适配的font-size即:

      document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
      

      然后我们看一下之前那个demo展示的效果

      .con {
            width: px2rem(200px);
            height: px2rem(200px);
            background-color: red;
      }
      <div class="con">
              
      </div>
      document.addEventListener('DOMContentLoaded', function(e) {
                      document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
      }, false);
      

      iPhone6下,正常显示200px
      iphone4下,显示169px

      由此可见我们可以通过设置不同的html基础值来达到在不同页面适配的目的,当然在使用js来设置时,需要绑定页面的resize事件来达到变化时更新html的font-size。

    rem适配进阶

    我们知道,一般我们获取到的视觉稿大部分是iphone6的,所以我们看到的尺寸一般是双倍大小的,在使用rem之前,我们一般会自觉的将标注/2,其实这也并无道理,但是当我们配合rem使用时,完全可以按照视觉稿上的尺寸来设置。

    1. 设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏,也即是设备像素比(device pixel ratio)dpr比较大,所以显示的像素较为清晰。

    2. 一般手机的dpr是1,iphone4,iphone5这种高清屏是2,iphone6s plus这种高清屏是3,可以通过js的window.devicePixelRatio获取到当前设备的dpr,所以iphone6给的视觉稿大小是(*2)750×1334了。

    3. 拿到了dpr之后,我们就可以在viewport meta头里,取消让浏览器自动缩放页面,而自己去设置viewport的content例如(这里之所以要设置viewport是因为我们要实现border1px的效果,加入我给border设置了1px,在scale的影响下,高清屏中就会显示成0.5px的效果)

      meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
      
    4. 设置完之后配合rem,修改

      @function px2rem($px){
          $rem : 75px;
          @return ($px/$rem) + rem;
      }
      

    双倍75,这样就可以完全按照视觉稿上的尺寸来了。不用在/2了,这样做的好处是:

    1. 解决了图片高清问题。

    2. 解决了border 1px问题(我们设置的1px,在iphone上,由于viewport的scale是0.5,所以就自然缩放成0.5px)

    在iphone6下的例子:

    我们使用动态设置viewport,在iphone6下,scale会被设置成1/2即0.5,其他手机是1/1即1.

    ```
    meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
    ```
    

    我们的css代码,注意这里设置了1px的边框

    ```
    .con {
                margin-top: 200px;
                width: 5.3rem;
                height: 5.3rem;
                border-top:1px solid #000;
     }
    ```
    

    rem进行屏幕适配总结

    rem也并不是万能的,下面也有一些场景是不适于使用rem的

    1. 当用作图片或者一些不能缩放的展示时,必须要使用固定的px值,因为缩放可能会导致图片压缩变形等。
    2. 再设置backgroundposition或者backgroundsize时不宜使用rem。
      在列举几个使用rem的线上网站:

    网易新闻:http://3g.163.com/touch/news/subchannel/all?version=v_standard

    聚划算:https://jhs.m.taobao.com/m/index.htm#!all

    展开全文
  • 设置scss文件px转rem // 默认16是html默认字号 // 默认750是设计稿默认宽度 // $n是量取设计稿的距离 @charset "UTF-8"; @function rem($n) { @return $n / (750 / 16)+rem; } 编辑方便调用的函数: @...

    设置meta标签

    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    // 以上是清浏览器缓存用的搜索

    <meta name="format-detection" content="telephone=no" />
    //忽略页面的数字为电话,忽略email识别

    <meta name="apple-mobile-web-app-capable" content="yes">
    //iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;

    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    //iphone的私有标签,它指定的iphone中safari顶端的状态条的样式; 在web app应用下状态条(屏幕顶部条)的颜色; 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。 注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方 (会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

    <meta name="msapplication-tap-highlight" content="no">
    // 去掉winphone系统a、input标签被点击时产生的半透明灰色背景

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    //强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放

    js设置html的默认字体大小(写在html头部)

    <script type="text/javascript">
        var bodyElement = document.documentElement || document.body,
            RC = {
                w: 750,
                h: 1206
            }, //默认设计稿宽高
            GC = {
                w: document.documentElement.clientWidth || window.innerWidth || screen.width,
                h: document.documentElement.clientHeight || window.innerHeight || screen.height
            };
        function setFontSize(){
            var rightSize = parseFloat((RC.w / RC.h).toFixed(1)),
                currentSize = parseFloat((GC.w / GC.h).toFixed(1)),
                lastHTMLSize = 16, // 默认16是因为html默认字号是16px
                html = document.getElementsByTagName("html")[0];
           
                if(rightSize > currentSize){  // 长屏
                    lastHTMLSize = 16;
                }else if(rightSize < currentSize){  //宽屏
                    lastHTMLSize = (RC.h / GC.h * GC.w) / RC.w * 16;
                }
                html.style.fontSize = GC.w / lastHTMLSize + 'px';
           
        }
    
        setFontSize();
    </script>

    设置scss文件px转rem

    // 默认16是html默认字号
    // 默认750是设计稿默认宽度
    // $n是量取设计稿的距离

    @charset "UTF-8";
    @function rem($n) {
        @return $n / (750 / 16)+rem;
    }
    

    编辑方便调用的函数:

    
    @function getTop($n) {
        @return ($n - 1206 / 2) / (750 / 16)+rem;
    }
    
    @function getLeft($n) {
        @return ($n - 750 / 2) / (750 / 16)+rem;
    }
    
    @function getRight($n) {
        @return (($n - 750) / 2) / (750 / 16)+rem;
    }
    
    @mixin center($left, $top) { //左右居中 上变
        position: absolute;
        left: 50%;
        top: rem($top);
        margin: 0 0 0 getLeft($left);
    }
    
    @mixin centerlt($left, $top) { //上下,左右居中 
        position: absolute;
        left: 50%;
        top: 50%;
        margin: getTop($top) 0 0 getLeft($left);
    }
    @mixin centerrt($right, $top) { //上下,左右居中 
        position: absolute;
        right: 50%;
        top: 50%;
        margin: getTop($top) getRight($right) 0 0;
    }
    @mixin middlert($right, $top) { //上下居中 右变
        position: absolute;
        right: rem($right);
        top: 50%;
        margin: getTop($top) 0 0 0;
    }
    
    @mixin centerb($left, $bottom) { //左右居中 下变
        position: absolute;
        left: 50%;
        bottom: rem($bottom);
        margin: 0 0 0 getLeft($left);
    }
    
    @mixin leftTop($left, $top) { //左变 上变
        position: absolute;
        left: rem($left);
        top: rem($top);
    }
    @mixin rightTop($right, $top) { //右变 上变
        position: absolute;
        right: rem($right);
        top: rem($top);
    }
    @mixin leftBottom($left, $bottom) { //右变 上变
        position: absolute;
        left: rem($left);
        bottom: rem($bottom);
    }

    调用上面的函数(宽高距离用ps量实际距离即可,默认设计稿宽750):

    .page1-img1{
        width: rem(473);
        height: rem(173);
        @include centerlt(139, 767);
    }
    展开全文
  • 移动端适配rem

    2020-04-10 10:56:53
    适配方案之前先认识下移动端,熟悉移动端和pc端的区别和特点,才能真正理解做适配的精髓,这里就简单介绍下; 网上找不到主流android设备的数据表,就以iphone为例: 以iphone6为例: 竖屏宽为375,叫做逻辑像素...
    认识移动端

    做适配方案之前先认识下移动端,熟悉移动端和pc端的区别和特点,才能真正理解做适配的精髓,这里就简单介绍下;

    网上找不到主流android设备的数据表,就以iphone为例:
    图片描述

    以iphone6为例:
    竖屏宽为375,叫做逻辑像素(有的地方叫独立像素);
    竖屏宽的像素750,叫做物理像素,是设备实际的光点个数,要知道屏幕都是由一个一个光点组成的;
    像素比(Asset)2x,就是2倍,物理像素/逻辑像素;
    ppi:像素密度326,实际平方英寸的光点个数;值越高画面越细腻,但对cpu和电池等硬件要求就越高;ppi超过163的屏幕苹果公司起了个洋气的名字,叫视网膜屏;

    逻辑像素和物理像素的概念需要消化消化,css中的px对应的实际上是逻辑像素,比如这里写个width:375px,是可以铺满横向的iphone6;

    特别提醒,这里所有的有关像素的概念都和实际的尺寸(英寸)没有多大关系。(比如iphone6的375就比一些android的360看上去还要窄一些。)

    pc端没有这么复杂的像素比关系,什么都是1:1:1;

    搞明白这些像素的关系,问题就来了,怎么在css中写1个尺寸,就能让所有尺寸和像素比的设备都饱和展示,比如上面说的375px,屏幕横过来是不是就只占手机一半的位置,换个320宽的手机是不是就溢出了,有滚动条了;

    认识单位rem

    简单介绍下rem和px的换算关系:1rem=html的font-size;
    比如:html{font-size:100px},那么1rem就等于100px;

    方案就出来了,所有单位使用rem,我们动态改变html的font-size;

    实施rem方案

    思路就是(一遍看不清楚,把下面的例子理解了再看一遍思路):先有一个基准,比如375的iphone6,(为什么拿375说事,上面已经提到,我们写的css样式实际上只和逻辑像素有关,至于手机用几个光点去渲染是它的事.)将html的font-size设置成容易计算的值比如100px,页面初始化 和 尺寸发生变化 的时候获取屏幕的宽度(document.body.clientWidth)就好了,然后用这个值除以375,获得一个比值,去乘以100px,最后得到的值来替换html的font-size。

    html的font-size=(屏幕宽/375)*100+'px';

    例如iphone6,body:{width:3.75rem};
    竖屏的时候:html{font-size:375/375}*100+'px',body宽就是3.75*(375/375)*100=375px,铺满了吧;
    把屏幕横过来:html{font-size:667/375}*100+'px',body宽3.75*(667/375)*100=667px,又铺满了吧;
    实力总结

    目前移动端ui的设计稿都是按375的iphone6来设计的,大多是2倍图,是为了展现更细节的东西,就是750px宽的psd图,在前端设计适配方案的时候就可以用375对应100px的方式来做,所有尺寸css写psd上的一半就好;

    rem的适配方案确定按以下几个步骤实施:
    1.确定设计稿尺寸,375倍数还是320倍数;
    2.在公共js中添加方法:

    var doc=document.docementElement;//减少dom操作
    resize(){
        //获取dom文档宽
        var clientWidth=doc.clientWidth,
            htmlFontSize=doc.style.fontSize;
            //动态改变html的font-size,以320为例
            if(clientWidth<320){//设置边界值以防万一
                htmlFontSize=‘100px’;
            }else(){
                htmlFontSize=clientWidth/320*100+'px';
            }
    }
    //检测屏幕尺寸变化同步font-size,如横竖屏切换时触发
    window.onresize=function(){
        resize()
    };
    //页面初始化时触发
    resize()

    3.css中所有的样式单位为rem,包括文字的大小,换算关系如下:
    如:设计稿尺寸为640,font-size为20px,那么所有尺寸除以2,
    {width:3.2rem;font-size:0.1rem;}
    如:设计稿尺寸为320,font-size为20px,那么body{width:3.2rem;font-size:0.2rem;}
    如:设计搞为375,那么resize()方法中的320要换成375,css写成body{width:3.75rem;font-size:0.2rem}

    特别提醒:这样的适配在pad横屏展示超级大,所以还是要根据业务需求设置临界值;
    移动端图片适配除了rem的尺寸还要根据不同尺寸设备更换2倍图和3倍图,比如pad上展示3倍图就会更清晰,一般方案是用media媒体查询更换背景图;

    rem的缺陷
    最近在做开发的时候遇到rem的一个大坑,就是如果用户改变了手机的字体大小,而且我们的页面样式的宽用了rem,比如{width:1rem},那么页面的宽就会成倍增长,导致页面乱掉。。。还没找到办法解决,宽度还是先避免使用rem的好。
    webpack自动化 代码还是写的px,打包后输出rem,有好处,也有坏处,自己琢磨;
    第一步安装 npm install postcss-px2rem postcss --save

    第二步 在 webpack.base.conf.js中 引入

    const webpack = require('webpack') 
    const px2rem = require('postcss-px2rem') 
    const postcss = require('postcss') 

    第三步 在module中添加如下代码

    plugins: \[ new webpack.LoaderOptionsPlugin({ 
    vue: { 
          postcss: \[require('postcss-px2rem')({ 
          remUnit: 75, propWhiteList: \[\] })\] }, 
          }) \], 

    第四步 在rules中加如下代码,css我是用到sass,所以需要引入对应的loader,不需要的可不写。

    { test: /\\.(css|less|scss)(\\?.\*)?$/, 
      loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader' }`
    展开全文
  • 移动端适配rem,vw

    2019-07-06 14:42:27
    方案一 rem 原文地址:https://www.cnblogs.com/leinov/p/5209456.html meta设置 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 适配代码...
  • 移动web开发适配rem

    2018-04-12 16:15:00
    移动的meta标签 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> 常见移动web适配方法: ...rem(font size of the root element)原理与简介:...
  • 根据 W3C 规范中对 1rem 的定义: 1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照。这就意味着 1rem 等于 html 元素的字体大小(大部分浏览器根元素的...
  • vue移动端的适配rem和vw记录

    千次阅读 2018-09-17 22:48:34
    在接触移动端开发的时候,适配是必须要解决的一个问题。个人在开发过程中,也是边做边学,使用了一些常用的解决方案,这里一一列举出来: 前提:移动端的适配更多关注的是宽度的适配,也就是说元素在不同设备上通过...
  • 首先安装好sass npm install sass-loader node-sass vue-style-loader --D ...这个时候你打开build文件夹下面的webpack.base.config.js ... test: /\.scss$/, ... @return ($px/ $rem) + rem; }  
  • 可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用...
  • 移动端页面适配rem换算

    万次阅读 2017-09-29 00:05:50
    为什么要使用rem之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。 但直接这样强制页面缩放过于粗暴,会导致...
  • 前端页面适配rem换算 为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。 但直接这样强制...
  • 移动 Web 适配rem

    2018-08-27 09:11:15
    提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦。 01兼容性 先看看兼容性...
  • 为什么要使用rem 转自:https://www.cnblogs.com/annie211/p/8118857.html 仅用于学习,违者必究!!! 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。 例如以屏幕320像素为基准,...
  • h5 手机屏幕适配REM

    千次阅读 2016-12-03 15:57:11
    一、rem、em和px之间的关系     使用rem之前,先得弄清楚rem、em和px之间的关系,特别是每一个单位的使用跟代码块的继承之间的关系: 单位 代码地址 运行后截图 说明 px ...
  • 移动web适配rem

    千次阅读 2016-09-12 15:21:14
    提到rem,大家首先会想到的是rm,px这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦。   兼容性 先看看兼容...
  • rem适配

    2018-09-10 17:41:00
    之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。 但直接这样强制页面缩放过于粗暴,会导致页面图片文字...
  • 原因  我们眼中看到的屏幕是由一个一个物理像素组成的,而我们css使用的是逻辑像素,也可以成为虚拟像素。在我们呈现结果的终端,它们的像素比可能都不一样,这时候我们要采用设备的像素比(DPR...rem 是相对于根部...
  • rem屏幕适配及px转rem

    2020-07-15 20:26:05
    rem屏幕适配及px转rem屏幕适配px转rem 屏幕适配 在vue项目中的index.html页面head标签内插入这段代码: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? '...
  • 前端页面的适配使用rem换算 https://www.cnblogs.com/liangxuru/p/6970629.html 注:本文转载之处:https://www.cnblogs.com/annie211/p/8118857.html 为什么要使用rem 之前有些适配做法,是通过js动态...
  • 前端页面适配rem换算

    千次阅读 2019-09-26 16:35:02
    之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。 但直接这样强制页面缩放过于粗暴,会导致页面图片文字...
  • rem单位移动端适配

    2019-04-17 18:24:42
    css 单位中有相对大小和绝对大小,px em 等等,但是css3出现了一个新的单位 —rem , rem单位是根据html元素的...运用在移动端的适配 html文件中如下: function rem() { let width = document.documentElement.g...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,025
精华内容 410
关键字:

scss的适配rem