成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端網(wǎng)頁布局適配rem方案小結(jié)

Nino / 776人閱讀

摘要：當(dāng)明確規(guī)定根元素的時(shí)，單位以該屬性的初始值作參照。適配具體實(shí)現(xiàn)方案設(shè)計(jì)稿尺寸寬度為，如果設(shè)計(jì)稿是，下邊會(huì)自動(dòng)計(jì)算的值比如，具體的尺寸不用調(diào)整例如，不用調(diào)整，這是一個(gè)比例大小，對(duì)應(yīng)的元素大小值會(huì)根據(jù)新的比如等于改變，從而按照比例適配。

前言

根據(jù) W3C 規(guī)范中對(duì) 1rem 的定義：

1rem 與等于根元素 font-size 的計(jì)算值。當(dāng)明確規(guī)定根元素的 font-size 時(shí)，rem 單位以該屬性的初始值作參照。
這就意味著 1rem 等于 html 元素的字體大?。ù蟛糠譃g覽器根元素的字體大小為16px）
兼容性

ios：6.1系統(tǒng)以上都支持

android：2.1系統(tǒng)以上都支持

大部分主流瀏覽器都支持，可以安心的往下看了。

rem：（font size of the root element）

意思就是根據(jù)網(wǎng)頁的根元素來設(shè)置字體大小，和em（font size of the element）的區(qū)別是，em是根據(jù)其父元素的字體大小來設(shè)置，而rem是根據(jù)網(wǎng)頁的跟元素（html）來設(shè)置字體大小的，舉一個(gè)簡(jiǎn)單的例子，

現(xiàn)在大部分瀏覽器IE9+，F(xiàn)irefox、Chrome、Safari、Opera ，如果我們不修改相關(guān)的字體配置，都是默認(rèn)顯示font-size是16px，即

html {
    font-size:16px;
}

那么如果我們想給一個(gè)P標(biāo)簽設(shè)置12px的字體大小，那么用rem來寫就是

p {
    font-size: 0.75rem; //12÷16=0.75（rem）
}

使用rem這個(gè)字體單位進(jìn)行適配，就是利用它作為一個(gè)全局字體固定參照單位的特性。如果改變html元素的字體大小，rem的值也就跟著改變，對(duì)應(yīng)的其他使用rem的布局尺寸，也會(huì)跟著改變，從而達(dá)到適配的目的，保證比例一致。 所以rem不僅可以適用于字體，同樣可以用于width height margin這些樣式的單位。

rem適配具體實(shí)現(xiàn)方案： 
設(shè)計(jì)稿尺寸寬度為750px，如果設(shè)計(jì)稿是640px，下邊js會(huì)自動(dòng)計(jì)算rem的值（比如rem:75px -> rem: 64px），具體的尺寸rem不用調(diào)整（例如 padding: 1.5rem，不用調(diào)整，這是一個(gè)比例大?。?，對(duì)應(yīng)的元素大小px值會(huì)根據(jù)新的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 {
      // 實(shí)現(xiàn)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 {
      // 實(shí)現(xiàn)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進(jìn)行轉(zhuǎn)換

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108908.html

相關(guān)文章

  • 移動(dòng)端網(wǎng)頁布局適配rem方案小結(jié)

    摘要：當(dāng)明確規(guī)定根元素的時(shí)，單位以該屬性的初始值作參照。適配具體實(shí)現(xiàn)方案設(shè)計(jì)稿尺寸寬度為，如果設(shè)計(jì)稿是，下邊會(huì)自動(dòng)計(jì)算的值比如，具體的尺寸不用調(diào)整例如，不用調(diào)整，這是一個(gè)比例大小，對(duì)應(yīng)的元素大小值會(huì)根據(jù)新的比如等于改變，從而按照比例適配。 前言 根據(jù) W3C 規(guī)范中對(duì) 1rem 的定義： 1rem 與等于根元素 font-size 的計(jì)算值。當(dāng)明確規(guī)定根元素的 font-size 時(shí)，rem...

    2shou 評(píng)論0 收藏0

  • 網(wǎng)頁單位和rem使用小結(jié)

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

    王巖威 評(píng)論0 收藏0

  • 關(guān)于移動(dòng)端適配，你必須要知道的

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

    lufficc 評(píng)論0 收藏0

  • 關(guān)于移動(dòng)端適配，你必須要知道的

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

    IntMain 評(píng)論0 收藏0

  • 我對(duì)移動(dòng)端適配的了解

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

    import. 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<