rem适配方案：两种方案、rem方案1实战苏宁首页

一、rem适配方案

让一些不能等比自适应的元素,达到当设备尺寸发生改变
的时候,等比例适配当前设备。
使用媒体查询根据不同设备按比例设置html的字体大小，
然后页面元素使用rem做尺寸单位,当html字体大小变化
元素尺寸也会发生变化,从而达到等比缩放的适配。

二、rem实际开发适配方案

① 按照设计稿与设备宽度的比例.动态计算并设置html根标签的font-size大小; (媒体查询)
② CSS中，设计稿元素的宽、高、相对位置等取值.按照同等比例换算为rem为单位的值;
在这里插入图片描述

三、rem适配方案技术使用(市场主流)

a.技术方案1

less
媒体查询
rem

b.技术方案2 (推荐淘宝方案)

flexible.js
rem

总结:

两种方案现在都存在.
方案2更简单,现阶段大家无需了解里面的js代码。

实际应用

1. rem实际开发适配方案1

rem +媒体查询+ less技术
1.设计稿常见尺寸宽度

设备	常见宽度
iphone 4.5	640px
iphone 678	750px
Android	常见320px、360px. 375px、 384px、 400px. 414px. 500px、 720px 大部分4.7~5寸的安卓设备为720px

一般情况下 ,我们以-套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级.牺牲一些效果
现在基本以750为准

2. 动态设置html标签font-size大小

① 假设设计稿是750px
② 假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份 )
③ 每一份作为html字体大小,750/15这里就是50px
④ 那么在320px设备的时候.字体大小为320/15就是21.33px
⑤ 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
⑥ 比如我们以750为标准设计稿
⑦ 一个100*100像素的页面元素在750屏幕下，就是100/ 50转换为rem是2rem* 2 rem比例是1比1
⑧ 320屏幕下，html 字体大小为21.33则2rem = 42.66px此时宽和高都是42.66 但是宽和高的比例还是1比1
⑨ 但是已经能实现不同屏幕下页而元素盒子等比例缩放的效果

3.元素大小取值方法

①最后的公式:页面元素的rem值=页面元素值(px)/ ( 屏幕宽度/划分的份数)
②屏幕宽度/划分的份数就是html font-size的大小
③或者:页面元素的rem值=页面元素值( px) 1 html font-size字体大小

首先我们选套标准尺寸 750为准
我们用屏幕尺寸除以我们划分的份数得到了html 里面的文字大小但是我们知道不同屏幕下得到的文字大小是不一样的
页面元素的rem值=页面元素在750像素的下px值/ html里面的文字大小

案例:苏宁网移动端首页

1.技术选型

方案:我们采取单独制作移动页面方案
技术:布局采取rem适配布局(less+ rem +媒体查询)
设计图:本设计图采用750px设计尺寸

2.设置公共common.less文件

新建common.less 设置好最常见的屏幕尺寸 , 利用媒体查询设置不同的html字体大小,因为除了首页其他页面也需要
我们关心的尺寸有320px、360px、 375px、 384px、 400px、 414px、 424px、 480px、540px、 720px、 750px
划分的份数我们定为15等份
因为我们pc端也可以打开我们苏宁移动端首页 ,我们默认htm字体大小为50px ,注意这句话写到最上面

[common.less]

在vscode安装了easy less的，写如下文件，保存后会生成common.css文件

//设置常见的屏幕尺寸修改里面的html文字大小
//其它屏幕尺寸：主要指电脑屏幕直接用最大的尺寸，
//此句一定要写在最上面，原因代码从上到下执行，下面会覆盖上面的
html{font-size: 50px;}


// 此次页面定义的划分的份数为15
@num:15;
// 关心的尺寸:320px、360px、 375px、 384px、 400px、 414px、 424px、 480px、540px、 720px、 750px
//320像素媒体查询
@media screen and (min-width:320px){
    // 共15份，每一份就是：
    html{font-size: 320px / @num;}
}
// 360px
@media screen and (min-width:360px){
    html{font-size:360px / @num}
}
// 375px iphone 678
@media screen and (min-width:375px){
    html{font-size:375px / @num}
}
// 384px 
@media screen and (min-width:384px){
    html{font-size:384px / @num}
}
// 400px 
@media screen and (min-width:400px){
    html{font-size:400px / @num}
}
// 414px 
@media screen and (min-width:414px){
    html{font-size:414px / @num}
}
// 424px 
@media screen and (min-width:424px){
    html{font-size:424px / @num}
}
// 480px 
@media screen and (min-width:480px){
    html{font-size:480px / @num}
}
// 540px 
@media screen and (min-width:540px){
    html{font-size:540px / @num}
}
// 720px 
@media screen and (min-width:720px){
    html{font-size:720px / @num}
}
// 750px 
@media screen and (min-width:750px){
    html{font-size:750px / @num}
}

生成的common.css

html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }
}

3.新建index.less文件

新建index.less 这里面写首页的样式
将刚才设置好的common.less 引入到index.less里面语法如下:

// 导入common.less，可加.less后缀，也可不加
@import "common";

保存后会自动生成index.css且里面把common.css里的内容复制了进来

4.在index.html页面引入样式

<meta name="viewport" content="width=device-width, initial-scale=1.0,maxinum-scale=1.0,user-scalable=0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

5.顶部导航index.html

<div class="search-content">
        <a href="#" class="nav">1</a>
        <div class="search">2</div>
        <a href="#" class="login">3</a>
    </div>

index.less样式

// body 
body{
    min-width: 320px;
    margin: 0 auto;
    width: 15rem; //在750宽度下1rem=50px (750/15=50px)，750px/50px=15rem,即750px转化成rem是15
    line-height: 1.5;
    background-color: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
}
// 页面元素rem值=元素px值/html字体px值
@baseFont:50;
// ===================搜索框=================================
.search-content{
    width: 15rem; //同上750px/50px=15rem，也可看作页面宽=15份
    height: 88rem / @baseFont; //高度88px/页面字体50px，为了单位为rem把88px改88rem
    background-color: #ffc001;
    position: fixed; //顶部对齐
    top: 0;
    left: 50%; //距左距离=页面宽度一半
    transform: translateX(-50%); //往回走自己宽度的一半即居中
    display:flex;
    //搜索框左导航
    .nav{
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        margin:11rem / @baseFont 25rem / @baseFont 10rem / @baseFont 25rem / @baseFont;
        background-color: #fff;
    }
    .search{
        flex:1;
        background-color: purple;
    }
    .login{
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        margin:10rem / @baseFont;
        background-color: #fff;
    }
}

效果：宽高都会随屏幕改变不断改变

在这里插入图片描述

完整代码

1。index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <!-- 顶部搜索框 -->
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" value="厨卫保暖季 哒哒哒">
            </form>
        </div>
        <a href="#" class="login">登录</a>
    </div>
    <!-- banner部分 -->
    <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>
    <!-- 广告部分 -->
    <div class="ad">
        <a href="#"><img src="upload/ad1.gif" alt=""></a>
        <a href="#"><img src="upload/ad2.gif" alt=""></a>
        <a href="#"><img src="upload/ad3.gif" alt=""></a>
    </div>
    <!-- nav模块 -->
    <nav>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>

    </nav>
</body>

</html>

2.index.less

// 首页的样式less文件
@import "common";
// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
// link 是把一个 样式文件引入到 html页面里面
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #F2F2F2;
}
// 页面元素rem计算公式： 页面元素的px / html 字体大小 50
// search-content
@baseFont: 50;
.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: 88rem / @baseFont;
    background-color:#FFC001;
    .classify {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        background: url(../images/classify.png) no-repeat;
        // 背景缩放
        background-size: 44rem / @baseFont 70rem / @baseFont;
    }
    .search {
        flex: 1;
        input {
            outline: none;
            width: 100%;
            border: 0;
            height: 66rem / @baseFont;
            border-radius: 33rem / @baseFont;
            background-color:#FFF2CC;
            margin-top: 12rem / @baseFont;
            font-size: 25rem / @baseFont;
            padding-left: 55rem / @baseFont;
            color: #757575;
        }
    }
    .login {
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        line-height: 70rem / @baseFont;
        margin: 10rem / @baseFont;
        font-size: 25rem / @baseFont;
        text-align: center;
        color: #fff;

    }
}

// banner
.banner {
    width: 750rem / @baseFont;
    height: 368rem / @baseFont;
    img {
        width: 100%;
        height: 100%;
    }
}
// ad
.ad {
    display: flex;
    a {
        flex: 1;
        img {
            width: 100%;
        }
    }
}
// nav
nav {
    width: 750rem / @baseFont;
    a {
        float: left;
        width: 150rem / @baseFont;
        height: 140rem / @baseFont;
        text-align: center;
        img {
            display: block;
            width: 82rem / @baseFont;
            height: 82rem / @baseFont;
            margin: 10rem / @baseFont auto 0;
        }
        span {
            font-size: 25rem / @baseFont;
            color: #333;
        }
    }
}

3.common.less

// 设置常见的屏幕尺寸 修改里面的html文字大小
a {
    text-decoration: none;
}
// 一定要写到最上面
html {
    font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @no;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @no;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @no;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @no;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @no;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @no;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}

4.normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

posted @ 2020-10-17 17:29 晨光曦微阅读(992) 评论(0) 编辑收藏举报

刷新页面返回顶部

晨光曦微