rem适配布局-媒体查询-less基础-flexible.js-苏宁案例做法

liko0403

已于 2022-04-11 22:11:45 修改

阅读量699

点赞数

分类专栏：移动web 文章标签：前端 javascript css css3 html5

于 2022-04-07 22:41:20 首次发布

本文链接：https://blog.csdn.net/weixin_42533892/article/details/124023837

版权

移动web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

less文件计算时最好加上括号，否则可能不生效哦！

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

苏宁首页案例

做法1：rem+媒体查询+less

做法二：rem适配方案2，采用flexible.js+rem

引入：

页面布局文字能否随着屏幕大小变化而变化？
流式布局和flex布局主要针对于宽度布局，那高度如何设置？（之前的案例都是写死的高度）
怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？（rem）

rem基础

em与rem都是相对长度单位
em 参考的自身的字体大小, 如果自身未设置字体大小 ,参考父元素的字体大小, 父元素也没有设置，就一直往上找
rem (root em)始终参考的是html标签的字体大小（跟父亲的字体大小没有关系）

        html {
            font-size: 12px;
        }
        
        div {
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }
        
        p {
            /* 1. em相对于父元素 的字体大小来说的 */
            /* width: 10em;
            height: 10em; */
            /* 2. rem 相对于 html元素 字体大小来说的 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
            /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
        }

媒体查询

媒体查询（Media Query）是CSS3新语法。

使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

媒体查询语法规则

@media screen and (判定条件px) {
  设置
}
//1.and 两侧必须有空格   判定条件一定记得加单位
//2.判定条件  max-width  min-width  min-device-width  
//3.推荐使用从小到大 判定条件使用min-width    
//4.如果要使用max-width  判定条件从大到小写
//为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写

//但是我们最喜欢的还是从小到大来写，这样代码更简洁



 <style>
        /* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
        /* max-width 小于等于800 */
        /* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
        
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
       /* 总结：媒体查询， 检测媒体（手机，电脑），的特征变化*/
        
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
    </style>

媒体查询修改背景颜色案例

 <style>
        /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
        /* 2. 小于540px 页面的背景颜色变为蓝色 */
        
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
        /* 4. 大于等于970 我们页面的颜色改为 红色 */
        
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen 还有 and 必须带上不能省略的 */
        /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
    </style>

媒体查询+rem（搭配使用更加）

案例：文字高度都可以改变

 * {
            margin: 0;
            padding: 0;
        }
        /* html {
            font-size: 100px;
        } */
        /* 从小到大的顺序 */
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }

媒体查询引入资源

当界面大小变化时，整个界面的结构有较大的变化时，我们会使用媒体查询引入资源。
针对不同大小的界面，准备不同的css样式文件，当界面大小变化时，直接改变引入的css样式文件，这就是媒体查询引入资源。

link的资源就是不同的屏幕大小设置不同的样式

 <style>
        /* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */
        /* 当我们屏幕小于640 我们让div一行显示一个 */
        /* 一个建议： 我们媒体查询最好的方法是从小到大 */
        /* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
    </style>
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>

<body>
    <div>1</div>
    <div>2</div>
</body>

less基础

less介绍

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less中文网址：http://less css.cn/
常见的CSS预处理器：Sass、Less、Stylus
一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。

less使用

新建一个后缀为less文件，在文件中写less语句

less变量：变量是指没有固定的值，可以改变的。

@变量名:值; 如：@color: pink;

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

// 定义一个粉色的变量
@color: pink;  
// 错误的变量名  @1color   @color~@#
// 变量名区分大小写  @color  和  @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
    background-color: @color;
}
div {
    color: @color;
    font-size: @font14;
}
a {
    font-size: @font14;
}

//- 定义了一个粉色的变量，body和div都使用了这个变量。那么我们如果想要将body和div的颜色一起修改为另一个颜色，只需要修改变量的值即可，简单方便
//- 一般将使用次数比较多的内容，定义为变量，然后通过使用变量，来使用到变量的值

less编译：Easy Less插件，保存less文件会自动生成css文件，修改变量css中自动修改页面引入css

less嵌套：遇到交集选择器、伪类、伪元素；在less文件里面书写，需要加上 & 符号

// 变量： 先定义  后使用
@color:hotpink;
@two-color:skyblue;
@three_color:yellow;

// 下面演示：交集的情况使用
section{
    ul{
        li{
            &.one{
                background-color: @color;
            }
        }
    }
// 下面演示：基于父元素的结构伪类
    div{
        &:nth-child(2){
            background-color: @three_color;
        }
    }
}

    <section>
        <div>
            <ul>
                <li class="one">儿子1</li>
                <li>儿子2</li>
                <li>儿子3</li>
            </ul>
        </div>
        <div>弟弟</div>
    </section>

less运算：

@baseFont: 50px;
html {
    font-size: @baseFont;
}
@border: 5px + 5;
div {
    width: 200px - 50;
    height: (200px + 50px ) * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}
// 1. 我们运算符的左右两侧必须敲一个空格隔开
// 2. 两个数参与运算  如果只有一个数有单位，则最后的结果就以这个单位为准
// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准

相应的css
html {
  font-size: 50px;
}
div {
  width: 150px;
  height: 500px;
  border: 10px solid red;
  background-color: #444444;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}

rem适配方案

按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）
CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；
实现后的效果：根据屏幕大小，所有内容都可以实现适配

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

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

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是 21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100*100像素的页面元素在 750屏幕下，就是 100/ 50 转换为rem 是 2rem*2rem 比例是1比1

⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

  <style>
        @media screen and (min-width: 320px) { /* 2/15   ----  42.66  */
            html {
                font-size: 21.33px;  /* 1rem就是21.33，是屏幕的 1/15  ,1rem屏幕等分之后的一份*/
            }
        }
        
        @media screen and (min-width: 750px) {   /*2/15   ---- 100px   */
            html {
                font-size: 50px;/* 1rem就是50px，是屏幕的 1/15 */
            }
        }
        
        div {
            width: 2rem; /* 设计稿为750px的100px的大小的盒子，转换为rem。   100/50 = 2rem  --- 2/15 */
            height: 2rem;
            background-color: pink;
        }
        /* 1. 首先我们选一套标准尺寸 750为准 
        2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
        /* 3. 页面元素的rem值 =  页面元素在 750像素的下px值 / html 里面的文字大小 */
    </style>
</head>

<body>
    <div></div>
</body>

苏宁首页案例

做法1：rem+媒体查询+less

1.技术选型

方案：单独制作移动页面方案

技术：采用rem适配布局

设计图：本设计图采用750px设计尺寸

2.搭建文件夹结构

3.引入视口标签和初始化样式

4.设置公共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;
    }
}

5.新建index.less文件

index.less中：
// 首页的样式less文件
@import "common";
// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
// link 是把一个 样式文件引入到 html页面里面
//总结：link和import，一个引入，一个导入，其实以上都一样，我中包含你
//	   只不过使用场景不一样：
//	   	   import是less语法，用于less文件导入less文件
//	   	   link是html语法，用于html引入css文件

将生成的index.css引入到index.html中

<link rel="stylesheet" href="css/index.css">

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- <script src="./js/flexible.js"></script> -->
    <title>Document</title>
</head>

<body>
    <!-- 顶部搜索狂 -->
    <div class="search-content">
        <div class="classify"></div>
        <div class="search">
            <form action="">
                <input type="search" value="厨卫保暖季 每千减百">
            </form>
        </div>
        <div class="login"><a href="#">登录</a></div>
    </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>

    <!-- 导航栏模块 -->
    <ul class="nav">
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
        <a href="#"><span><img src="./upload/nav1.png" alt=""></span><span>爆款手机</span></a>
    </ul>

    
</body>

</html>

样式

@import "common.less";

body {
    min-width: 320px;
    // 750/50
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background-color: #f2f2f2;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

@baseFont: 50;
// 页面元素rem计算公式 ：页面元素px/ html字体大小

.search-content {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;

    height: (88rem / 50);
    background-color: #ffc001;
    display: flex;

    .classify {
        width: (44rem / @baseFont);
        height: (70rem / @baseFont);
        background: url(../images/classify.png) no-repeat;
        background-size: (44rem / @baseFont) auto;
        margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
    }

    .search {
        flex: 1;
        // background-color: aqua;

        input {
            width: 100%;
            height: (66rem / @baseFont);
            border-radius: (33rem / @baseFont);
            border: none;
            background-color: #fff2cc;
            margin-top: (12rem / @baseFont);
            outline: none;
            font-size: (20rem / @baseFont);
            padding-left: (50rem / @baseFont);
            color: #666;
        }

    }

    .login {
        width: (75rem / @baseFont);
        height: (70rem / @baseFont);
        line-height: (70rem / @baseFont);
        // background-color: #fff;
        margin: (11rem / @baseFont);
        font-size: (25rem / @baseFont);
        text-align: center;
        color: #fff;

        a {
            color: #fff;
        }
    }
}

// banner部分
.banner {
    width: (750rem / @baseFont);
    height: (368rem / @baseFont);

    img {
        width: 100%;
    }
}

// 广告部分
.ad {
    display: flex;
    width: 100%;

    a {
        flex: 1;

        img {
            width: 100%;
        }
    }

}

// 导航栏模块
.nav {
    display: flex;
    flex-wrap: wrap;

    a {
        height: (140rem / @baseFont);
        flex: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            width: (82rem / @baseFont)
        }

        span {
            &:nth-child(2) {
                font-size: (20rem / @baseFont);
                color: #333;
            }
        }
    }
}

做法二：rem适配方案2，采用flexible.js+rem

github地址：https://github.com/amfe/lib-flexible

1.技术选型

2.搭建文件夹结构

3.设置视口标签，引入初始化样式还有js文件

4.设置body样式

body {
    min-width: 320px;
    max-width: 750px;
    /* flexible 给我们划分了 10 等份 */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}

这里为啥需要max-width:750px？

因为我们使用的是flexible来处理的，他跟第一种方案不一样，并没有通过媒体查询来限制条件，所以需要自己设置max-width。
width为啥是10rem？

因为设计稿是750px，而分成10等份，每一份是75px，font-size就是75px，所以750/75=10rem。

一个神奇的vscode插件cssrem:自动将px为单位的转化为rem。但是插件默认的html字体大小为16px ，而我们的字体大小为75px ，打开设置快捷键是 ctrl + 逗号点击首选项按钮，再点击设置，进入设置界面：点击三个点，再点击打开settings.json （如果进入此界面，没有三个点，则直接搜索cssrem），搜索cssroot，在右侧修改

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入我们的flexible.js 文件 -->
    <script src="js/flexible.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="search-content">
        <div class="classify"></div>
        <div class="search">
            <form action="">
                <input type="search" value="你好啊">
            </form>
        </div>
        <div class="login"><a href="#">登录</a></div>
    </div>
</body>

</html>

/* 如果我们的屏幕超过了 750px  那么我们就按照 750设计稿来走 不会让我们页面超过750px */

@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

body {
    min-width: 320px;
    max-width: 750px;
    /* flexible 给我们划分了 10 等份 */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #a63030;
}

a {
    text-decoration: none;
    color: #fff;
    font-size: .333333rem;
}


/* 这个插件默认的html文字大小 cssroot  16px */


/* img {
    width: 5.125rem;
    height: 4rem;
    width: 1rem;
    width: 1.093333rem;
    height: 1rem;
} */



/* search-content */
.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    height: 1.1733rem;
    background-color: #FFC001;
}

.search-content .classify {
    width: .5867rem;
    height: .9333rem;
    margin: .1467rem .3333rem .1333rem;
    background: url(../images/classify.png) no-repeat;
    background-size: .5867rem .9333rem;
}

.search-content .search {
    flex: 1;
}

.search input {
    outline: none;
    width: 100%;
    border: 0;
    height: .88rem;
    border-radius: .44rem;
    background-color: #FFF2CC;
    margin-top: .1333rem;
    font-size: .3333rem;
    padding-left: .7333rem;
    color: #757575;
}

.login {
    width: 1rem;
    height: .9333rem;
    line-height: 1rem;
    /* background-color: blue; */
    margin: .1333rem;
    font-size: .3333rem;
    text-align: center;
    color: #fff;
}

liko0403

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
rem适配布局-媒体查询-less基础-flexible.js-苏宁案例做法

rem适配布局-媒体查询-less基础--flexible.js-苏宁案例引入：页面布局文字能否随着屏幕大小变化而变化？流式布局和flex布局主要针对于宽度布局，那高度如何设置？（之前的案例都是写死的高度怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？（rem）rem基础em与rem都是相对长度单位em 参考的自身的字体大小, 如果自身未设置字体大小 ,参考父元素的字体大小, 父元素也没有设置，就一直往上找 rem (root em)始终参考的是html标签的字体大小（跟父亲的字体大小没有关系）
复制链接

扫一扫