移動端網頁布局適配rem方案小結

Nino 發布于2019-08-26 13:29 / 753人閱讀

摘要：當明確規定根元素的時，單位以該屬性的初始值作參照。適配具體實現方案設計稿尺寸寬度為，如果設計稿是，下邊會自動計算的值比如，具體的尺寸不用調整例如，不用調整，這是一個比例大小，對應的元素大小值會根據新的比如等于改變，從而按照比例適配。

前言

根據 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進行轉換

云服務器 GPU云服務器移動端適配方案移動端適配移動端適配 js 移動端布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108908.html

移動端網頁布局適配rem方案小結

摘要：當明確規定根元素的時，單位以該屬性的初始值作參照。適配具體實現方案設計稿尺寸寬度為，如果設計稿是，下邊會自動計算的值比如，具體的尺寸不用調整例如，不用調整，這是一個比例大小，對應的元素大小值會根據新的比如等于改變，從而按照比例適配。前言根據 W3C 規范中對 1rem 的定義： 1rem 與等于根元素 font-size 的計算值。當明確規定根元素的 font-size 時，rem...

2shou 2019-08-30 15:55 評論0 收藏0
網頁單位和rem使用小結

摘要：像素像素是一個相對單位。相對不同屏幕，其實際像素大小不同。解決方案直接使用實現的終端適配有興趣的小伙伴可以看下的解決方案使用實現手淘頁面的終端適配地址移動端適配單位的坑你知道多少關于移動端布局的一些總結網頁尺寸單位百分比（%）英寸（in）厘米（cm）毫米（mm）磅數（pt） 12 點活字（pc）字母高度一半（ex）父級字體（em）像素（px）根元素字體（rem） ...

王巖威 2019-08-29 15:26 評論0 收藏0
關于移動端適配，你必須要知道的

摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為那它每英寸約含有個物理像素點。導讀移動端適配，是我們在開發中經常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案橫屏適配高清屏圖片模糊問題 ... ...

lufficc 2019-08-26 13:48 評論0 收藏0
關于移動端適配，你必須要知道的

摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為那它每英寸約含有個物理像素點。導讀移動端適配，是我們在開發中經常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案橫屏適配高清屏圖片模糊問題 ... ...

IntMain 2019-08-30 10:55 評論0 收藏0
我對移動端適配的了解

摘要：隨著移動端的發展，在手機上看電腦端的頁面已成為非常普及現象。方案一固定高度，使其寬度自適應這也是我接觸移動端適配第一次使用的方案。不知不覺做前端已經兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發展對于大前端發展是喜聞樂見的，這次的快應用的手機廠...

import. 2019-08-30 14:16 評論0 收藏0