• 38. rem适配布局

    目录

    1  rem

    2  媒体查询

    3  媒体查询+rem改变元素大小

    4  媒体查询引入文件

    5  rem方案执行

    6  苏宁首页模拟(技术方案一)

    6.1  媒体查询

    6.2  首页部分

    7  苏宁首页模拟(技术方案二)

    1  rem

    rem（root em）是一个相对的单位，类似于em。em随着父元素字体大小改变而改变，rem随着html元素字体大小改变而改变，比如html的font-size设置为12px后再设置一个div的宽度为2rem，那么div的宽度就为24px

    好处是使用rem为单位，我们只需要修改html的字体大小，就可以改变所有元素的大小，而且是等比例改变

    使用rem可以做到下面这些事情

    • 文字可以随着页面尺寸的改变而改变
    • 元素可以随着页面尺寸等比例缩放(高度可以自适应)

    2  媒体查询

    媒体查询(Media Query)是CSS3新语法，使用媒体查询前要加入视口

    我们可以使用媒体查询改变html的font-size，从而控制页面中所有元素的大小

    媒体查询的语法是这样的

    mediatype是媒体类型，主要有下面三个常用值

    • all 用于所有设备
    • print 用于打印机和打印预览
    • screen 用于电脑屏幕，平板电脑，智能手机等

    mediatype的and,not与only叫关键字

    • and 且
    • not 非
    • only 只有

    media feature是媒体特性，我们了解下面三个

    • 注意media feature要加小括号

    我们下面做一个如果屏幕宽度小于800px时屏幕背景颜色变为青色，否则不变

    当宽度小于800px时是这样的

    大于800px时是这样的

    可以对一个条件进行多次判断，我现在想让宽度小于500px时，背景变为红色，500-800px时变为青色，800px以上不设置背景颜色

    宽度小于500px时

    500-800之间

    大于800

    可以使用and连接多个判断条件，比如我现在想要

    • 500px 以下为红色
    • 550px-800px 为青色

    其余条件不设置背景颜色

    那么我们可以在青色的判断条件中加入min-width

    500px以下

    500-550px

    550-800px

    800px以上

    3  媒体查询+rem改变元素大小

    当宽度小于600px时，盒子是这样的

    当宽度在600-700px之间的时候，盒子是这样的

    当宽度大于700px时，盒子是这样的

    4  媒体查询引入文件

    语法是这样的

    我们做个例子

    red.css

    cyan.css

    当屏幕宽度小于650px时，盒子是红色的

    大于650px时，盒子是青色的

    5  rem方案执行

    首先先选择技术方案，两种技术方案原理类似

    你会拿到一张原型图，基本只给你一张，如果有多张比例不同的就需要使用媒体查询进行多宽度判断

    原型图的宽度基本以750px为准

    之后我们定义750px时，html的font-size为50px

    • 总要有一个font-size，一般我们都会选用这个值，这个值无论你选什么也不会影响元素的宽高比，如果你的font-size选的越大，你的元素展示的就会越小，比如说我选100px，那么元素的宽就会为font-size:50px元素的宽的一半

    之后你在定义元素宽高的时候都使用rem作为单位，比如你在原型图上看到了一个宽150px，高200px的盒子，那么你给的时候就应该给width:3(150/50)rem，height:4(200/50)rem

    最后定义媒体查询，比如你现在写一个宽度为320px的媒体查询，那么你应该把font-size修改为21.33px = 320 / (750/50)

    6  苏宁首页模拟(技术方案一)

    苏宁移动端首页地址 苏宁易购(Suning.com)-家电家装成套购，专注服务省心购！

    我做到了10个功能那里，下面直接用子绝父相去摆就可以了

    项目中使用了less，less的简单用法可以看一下这个

    附录9-less基础_Suyuoa的博客-CSDN博客

    6.1  媒体查询

    我们关注这些像素值

    media.less

    1. @diviend:15;
    2.  
    3. @media screen and (max-width:320px) {
    4.     html {
    5.         font-size:(320px/@diviend);
    6.     }
    7. }
    8.  
    9. @media screen and (min-width:320px) and (max-width:360px) {
    10.     html {
    11.         font-size:(360px/@diviend) ;
    12.     }
    13. }
    14.  
    15. @media screen and (min-width:360px) and (max-width:375px) {
    16.     html {
    17.         font-size:(375px/@diviend) ;
    18.     }
    19. }
    20.  
    21. @media screen and (min-width:375px) and (max-width:384px) {
    22.     html {
    23.         font-size:(384px/@diviend) ;
    24.     }
    25. }
    26.  
    27. @media screen and (min-width:384px) and (max-width:400px) {
    28.     html {
    29.         font-size:(400px/@diviend) ;
    30.     }
    31. }
    32.  
    33. @media screen and (min-width:400px) and (max-width:414px) {
    34.     html {
    35.         font-size:(414px/@diviend) ;
    36.     }
    37. }
    38.  
    39. @media screen and (min-width:424px) and (max-width:480px) {
    40.     html {
    41.         font-size:(480px/@diviend) ;
    42.     }
    43. }
    44.  
    45. @media screen and (min-width:480px) and (max-width:540px) {
    46.     html {
    47.         font-size:(540px/@diviend) ;
    48.     }
    49. }
    50.  
    51. @media screen and (min-width:540px) and (max-width:720px) {
    52.     html {
    53.         font-size:(720px/@diviend) ;
    54.     }
    55. }
    56.  
    57. @media screen and (min-width:720px) and (max-width:750px) {
    58.     html {
    59.         font-size:(750px/@diviend) ;
    60.     }
    61. }
    62.  
    63. @media screen and (min-width:750px) {
    64.     html {
    65.         font-size:60px ;
    66.     }
    67. }

    6.2  首页部分

    index.less

    1. // @import 'media';
    2.  
    3. @rate:25.6;
    4. body {
    5.     height:3000px;
    6. }
    7. // 头部新人大礼包
    8.  
    9. .header {
    10.     height:(45rem/@rate);
    11. }
    12.  
    13. .header img {
    14.     width: 100%;
    15.     height: 100%;
    16. }
    17.  
    18. // 搜索框上部
    19. .up_search {
    20.     display: flex;
    21.     justify-content: space-between;
    22.     align-items: center;
    23.     height: (38rem/@rate);
    24.     background-color: yellow;
    25. }
    26.  
    27. .up_search span {
    28.     width:(18rem/@rate);
    29.     height:(30rem/@rate);
    30.     background-size: (18rem/@rate) auto;
    31.     background-repeat: no-repeat;
    32.     margin: 0px 17px;
    33. }
    34.  
    35. .up_search span:nth-child(1) {
    36.     background-image: url(../images/class.png);
    37. }
    38.  
    39. .up_search span:nth-child(3) {
    40.     background-image: url(../images/mine.png);
    41. }
    42.  
    43. .up_search img {
    44.     width:(195rem/@rate);
    45.     height:(38rem/@rate);
    46. }
    47.  
    48. // 搜索框
    49.  
    50. .search {
    51.     position: relative;
    52.     padding-top: (10rem/@rate);
    53.     padding-bottom: (10rem/@rate);
    54.     background-color: yellow;
    55. }
    56.  
    57. .search input {
    58.     position: relative;
    59.     left: 50%;
    60.     transform: translate(-50%,0);
    61.     width: 95%;
    62.     height:(35rem/@rate);
    63.     border-radius:(22rem/@rate);
    64.     text-indent: (40rem/@rate);
    65.     font-size: (14rem/@rate);
    66.     border:transparent solid 1px;
    67. }
    68.  
    69. .search span {
    70.     position:absolute;
    71.     left:(25rem/@rate);
    72.     line-height:(35rem/@rate);
    73.     font-family: icomoon;
    74.     font-size:(20rem/@rate);
    75.     color:gray;
    76.     z-index: 999;
    77. }
    78.  
    79. // 轮播图
    80. .rotate {
    81.     position: relative;
    82.     overflow: hidden;
    83.     height:(120rem/@rate);
    84. }
    85.  
    86. .rotate img {
    87.     position: absolute;
    88.     left: 50%;
    89.     transform: translate(-50%,0);
    90.     width:95%;
    91.     height: 100%;
    92.     border-radius: (15rem/@rate);
    93.     z-index: 999;
    94. }
    95.  
    96. .rotate_background {
    97.     position: relative;
    98.     left: 50%;
    99.     transform: translate(-50%,0);
    100.     background-color: yellow;
    101.     width:150%;
    102.     height:(90rem/@rate);
    103.     border-radius: 0 0 70% 70%;
    104. }
    105.  
    106. // 免息广告
    107. .interest_free {
    108.     height:(100rem/@rate);
    109.     background:url(../upload/interset_free.gif);
    110.     background-size: 100% 100%;
    111. }
    112.  
    113. // 十个功能
    114. .ten_function {
    115.     display: flex;
    116.     justify-content: space-around;
    117.     flex-wrap: wrap;
    118.     margin-top: (15rem/@rate);
    119. }
    120.  
    121. .ten_function a {
    122.     display: flex;
    123.     flex-direction: column;
    124.     align-items: center;
    125.     width: 20%;
    126. }
    127.  
    128. .ten_function a img {
    129.     width: (42rem/@rate);
    130.     height: (42rem/@rate);
    131. }
    132.  
    133. .ten_function p {
    134.     font-size:(14rem/@rate);
    135. }

    我手头没有原型图，我直接用iphone6显示出来的界面当作原型图，显示出来的宽度为375

    确定了以375px为基准，我们回到刚刚生成的媒体查询css，找到375px的字体大小

    发现是25.6px，之后的所有元素大小，可以先用px看一下，看完之后把px改成rem，然后再除我们定义的rate，就可以适配大多数屏幕了

    比如说我的这个分类按钮

    在原型图中量出来是 18*30px，那么你就这样写

    也不一定所有的单位都要用rem，比如我下面的margin用的就是17px，在一定范围内依然正常显示

    html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    7.     <link rel="stylesheet" href="css/initialization.css">
    8.     <link rel="stylesheet" href="css/media.css">
    9.     <link rel="stylesheet" href="css/index.css">
    10.     
    11.     <title>Documenttitle>
    12. head>
    13. <body>
    14.     <section class="header"><img src="upload/new_one_199.gif" alt="">section>
    15.  
    16.     <section class="up_search">
    17.         <span>span>
    18.         <img src="upload/cool_summer.gif" alt="">
    19.         <span>span>
    20.     section>
    21.  
    22.     <section class="search">
    23.         <span class="magnifier">span>
    24.         <input type="text" placeholder="空调">
    25.     section>
    26.  
    27.     <section class="rotate">
    28.         <img src="upload/rotate.jpg" alt="">
    29.         <div class="rotate_background">div>
    30.     section>
    31.  
    32.     <section class="interest_free">section>
    33.  
    34.     <section class="ten_function">
    35.         <a href="#">
    36.             <img src="images/ten_function/one.png" alt="">
    37.             <p>家电p>
    38.         a>
    39.         <a href="#">
    40.             <img src="images/ten_function/one.png" alt="">
    41.             <p>家电p>
    42.         a>
    43.         <a href="#">
    44.             <img src="images/ten_function/one.png" alt="">
    45.             <p>家电p>
    46.         a>
    47.         <a href="#">
    48.             <img src="images/ten_function/one.png" alt="">
    49.             <p>家电p>
    50.         a>
    51.         <a href="#">
    52.             <img src="images/ten_function/one.png" alt="">
    53.             <p>家电p>
    54.         a>
    55.         <a href="#">
    56.             <img src="images/ten_function/one.png" alt="">
    57.             <p>家电p>
    58.         a>
    59.         <a href="#">
    60.             <img src="images/ten_function/one.png" alt="">
    61.             <p>家电p>
    62.         a>
    63.         <a href="#">
    64.             <img src="images/ten_function/one.png" alt="">
    65.             <p>家电p>
    66.         a>
    67.         <a href="#">
    68.             <img src="images/ten_function/one.png" alt="">
    69.             <p>家电p>
    70.         a>
    71.         <a href="#">
    72.             <img src="images/ten_function/one.png" alt="">
    73.             <p>家电p>
    74.         a>
    75.     section>
    76.     
    77. body>
    78. html>

    在稍微宽一点儿的屏幕中同样使用

    7  苏宁首页模拟(技术方案二)

    上面使用的是技术方案一，现在我们走一下技术方案2中的流程，技术方案二中用到flexible.js

    flexible.js项目地址 GitHub - amfe/lib-flexible: 可伸缩布局方案

    解压后会有这些文件

    我们复制方案一的代码，把media.css与media.less删掉，创建一个名为js的文件夹，然后将index.js放入js中

    在index.html中屏蔽掉media.css，然后加入script那一行

    在flexible.js除的是10，我们上面除的是15，我们的原型图是375px，所以要将index.less的rate改为37.5

    如果这里你没有使用less，也不想用计算器一个一个算，那么你可以使用vscode中的插件cssrem，这个插件在你写px的时候，会自动帮你转换成rem，使用方式在这里有介绍 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

    之后进入initialization.css中取消对body最大宽度与最小宽度的约束

    如果你还是想要约束尺寸，你可以这样写

    • 这里不加!important的权重没有js中的权重高，如果只约束body的大小而不约束font-size的话，你的页面会达不到想要的效果

    这样我们方案二就做完了，打开后我们可以改变宽度，在改变宽度的过程中会比较丝滑(不存在元素大小突变)

  • 相关阅读:
    淘宝API接口，获得淘宝app商品详情原数据（Onebound数据）
    js 关键字赋值.html
    10kV光伏并网用电能质量在线监测装置
    毫末AI DAY的智驾弹药：上有「世界模型」，下有3000元方案
    JavaScript 设计模式之状态模式
    docker-部署 redis 主从同步（一主，两从+哨兵模式）tag:redis:6.2.6
    基于java的医院微信小程序
    信息流广告投放的技巧
    SLA 、SLO & SLI
    在平台上使用Conda环境管理
  • 原文地址：https://blog.csdn.net/potato123232/article/details/125905414