menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

精求精 rem适配布局

武飞扬头像
小羊卷
帮助1人

1.适配导读：

什么是适配布局？与flex或者流式布局又有什么区别？

所谓的适配布局，是让页面盒子的高度，宽度，内外边距，边框大小，文字的大小，定位的元素位置等能够根据屏幕宽度自动改变大小和位置，从而达到对不同的屏幕都能够做到最完美的展示，这就是rem适配布局的优秀地方。

flex和流式布局，主要针对盒子的宽度，仅能够做到宽度自适应屏幕，但是存在高度无法改变的缺陷，rem正好补全这一点。

以后的布局，不会是只用flex或者只用流式布局、rem布局，而是混合布局，flex布局做排版，rem做自适应屏幕。

最后的最后我会放上苏宁的案例，供大家理解flex less rem布局的完美

2.适配布局的方法：

1.rem less 媒体查询

2.flexible.js less rem

本次重点在第一种方法

3.适配布局基础知识导读

1.初识rem em

1.rem 与 em ？

为什么放一块讲？ rem 和 em都是相对单位，不同的地方在于 rem相对html的字体大小来确定 1rem = html的font-size em根据自身，如果自身没有设置字体大小，那么就会寻找最近具有字体大小的父盒子

2.为什么用rem

正是因为rem只根据html的字体大小有关，所以只要在不同的屏幕下，只要更改html的字体大小，就可以控制1rem = 多少，将盒子的高宽等 用px的地方都改为rem， 达到改变html字体大小从而改变整个页面的大小，达到适配效果。

2.html的字体大小的确定

rem的难点在于如何确定不同屏幕宽度下的html的字体大小问题？

先讲思路：

1.根据设计稿，将屏幕划分成10 / 15 /20 / 30 / 40份，选一个自己喜欢的，或者领导要求的份数

2.假设此时设计稿是750px 我们将设计稿分为15份 那么 每一份的大小为 50px

3.所以此时 我们只需要设置在750屏幕及以上，字体大小为50px

4.确定好份数后， 750px下，html字体大小为 50 450px下呢？

5.450px下 html字体大小 450 /15 = 30px

6.540px ？ 540 / 15 = 36px

7.总结，html字体大小 = 屏幕宽度 / 确定划分的份数

下面列出几个问题？

为什么html字体大小 = 屏幕宽度 / 确定划分的份数？

因为我们要实现等比例的缩放 所谓的等比例，是屏幕宽度 与 html字体大小的比例 永远是 份数 ： 1 这样才能够实现等比缩放。

如果750px下 字体大小为 50px 500px 屏幕下 字体大小为 20px 合适吗？ 缩放也不会同步吧！

3.媒体查询

1.语句规范

1.如果界面的盒子摆放位置不变，那么媒体查询写在css中，如果是内嵌式，需要写在style内部 如果是外链式，需要写在css文件里

规范：

@media screen（手机，平板，pc端）/all （全部）/print（打印机） and （条件语句）

内容虽多，但是需要我们记住的就是下面这种类型！

@media screen and (max-width:540px)

2.如果界面的盒子位置需要改变，那么就需要写不同的css样式，媒体查询此时作用就是通过查询屏幕宽度，选择不同的样式 此时的书写方式

<link rel="stylesheet" href="./style780.css" media=" screen and (min-width:780px)">

2.媒体查询通用代码：

主要适配的屏幕宽度有：320px 360px 375px 384px 400px 414px 424px 480px 540px 720px 750px

  1.  
    @media screen and (min-width: 320px) {
  2.  
    html {
  3.  
    font-size: 21.33333333px;
  4.  
    }
  5.  
    }
  6.  
    @media screen and (min-width: 360px) {
  7.  
    html {
  8.  
    font-size: 24px;
  9.  
    }
  10.  
    }
  11.  
    @media screen and (min-width: 375px) {
  12.  
    html {
  13.  
    font-size: 25px;
  14.  
    }
  15.  
    }
  16.  
    @media screen and (min-width: 384px) {
  17.  
    html {
  18.  
    font-size: 25.6px;
  19.  
    }
  20.  
    }
  21.  
    @media screen and (min-width: 400px) {
  22.  
    html {
  23.  
    font-size: 26.66666667px;
  24.  
    }
  25.  
    }
  26.  
    @media screen and (min-width: 414px) {
  27.  
    html {
  28.  
    font-size: 27.6px;
  29.  
    }
  30.  
    }
  31.  
    @media screen and (min-width: 424px) {
  32.  
    html {
  33.  
    font-size: 28.26666667px;
  34.  
    }
  35.  
    }
  36.  
    @media screen and (min-width: 480px) {
  37.  
    html {
  38.  
    font-size: 32px;
  39.  
    }
  40.  
    }
  41.  
    @media screen and (min-width: 540px) {
  42.  
    html {
  43.  
    font-size: 36px;
  44.  
    }
  45.  
    }
  46.  
    @media screen and (min-width: 720px) {
  47.  
    html {
  48.  
    font-size: 48px;
  49.  
    }
  50.  
    }
  51.  
    @media screen and (min-width: 750px) {
  52.  
    html {
  53.  
    font-size: 50px;
  54.  
    }
学新通

4.less使用

1.less介绍

less是帮助我们书写css的工具 帮助我们简化书写css样式的复杂性，最直接的就是不用再书写很长的父级变量名 而且less中可以定义变量，后期更易于维护代码。如若将颜色 字体大小 份数 定义为变量，那么我们只需要改变变量的值就可以实现全局的更改。

2.less的使用

后缀 .less

在less中写代码，后代写在父亲的大括号内 如果想要用结构伪类 伪元素，需要在前面加&

使用如图：

要求：第一个p 颜色是红色 第二个p里面的a鼠标经过变成红色 box里面的文字是绿色

  1.  
    html结构：
  2.  
    <body>
  3.  
    <div class="box">
  4.  
    <p>
  5.  
    我是第一个p标签;
  6.  
    </p>
  7.  
    <p>
  8.  
    <a href="#">我是第二个p标签</a>
  9.  
    </p>
  10.  
    <div class="box2">
  11.  
    hello
  12.  
    </div>
  13.  
    </div>
  14.  
    </body>
  1.  
    less语句：
  2.  
    .box {
  3.  
    p {
  4.  
    &:first-child {
  5.  
    color: red;
  6.  
    }
  7.  
     
  8.  
    &:nth-child(2) {
  9.  
    a {
  10.  
    color: blue;
  11.  
     
  12.  
    &:hover {
  13.  
    color: red;
  14.  
    }
  15.  
    }
  16.  
    }
  17.  
    }
  18.  
     
  19.  
    .box2 {
  20.  
    color: green;
  21.  
    }
  22.  
    }
学新通

4.苏宁移动端布局

1.搭建文件夹结构

学新通

2.index.html中引入normalize.css基础样式，设置视口标签

  1.  
    <meta name="viewport" content="width=device-width, user-scalable=no,
  2.  
        initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  3.  
     
  4.  
    <link rel="stylesheet" href="./css/normalize.css">

3.less中书写媒体查询

通常我们把媒体查询写在common.less中

  1.  
    // 设置常见的屏幕尺寸 修改里面的html文字大小
  2.  
    a {
  3.  
    text-decoration: none;
  4.  
    color: #333;
  5.  
    }
  6.  
     
  7.  
    // 我们此次定义的划分的份数 为 15
  8.  
    @no: 15;
  9.  
     
  10.  
    // 320
  11.  
    @media screen and (min-width: 320px) {
  12.  
    html {
  13.  
    font-size: (320px / @no);
  14.  
    }
  15.  
    }
  16.  
     
  17.  
    // 360
  18.  
    @media screen and (min-width: 360px) {
  19.  
    html {
  20.  
    font-size: (360px / @no);
  21.  
    }
  22.  
    }
  23.  
     
  24.  
    // 375 iphone 678
  25.  
    @media screen and (min-width: 375px) {
  26.  
    html {
  27.  
    font-size: (375px / @no);
  28.  
    }
  29.  
    }
  30.  
     
  31.  
    // 384
  32.  
    @media screen and (min-width: 384px) {
  33.  
    html {
  34.  
    font-size: (384px / @no);
  35.  
    }
  36.  
    }
  37.  
     
  38.  
    // 400
  39.  
    @media screen and (min-width: 400px) {
  40.  
    html {
  41.  
    font-size: (400px / @no);
  42.  
    }
  43.  
    }
  44.  
     
  45.  
    // 414
  46.  
    @media screen and (min-width: 414px) {
  47.  
    html {
  48.  
    font-size: (414px / @no);
  49.  
    }
  50.  
    }
  51.  
     
  52.  
    // 424
  53.  
    @media screen and (min-width: 424px) {
  54.  
    html {
  55.  
    font-size: (424px / @no);
  56.  
    }
  57.  
    }
  58.  
     
  59.  
    // 480
  60.  
    @media screen and (min-width: 480px) {
  61.  
    html {
  62.  
    font-size: (480px / @no);
  63.  
    }
  64.  
    }
  65.  
     
  66.  
    // 540
  67.  
    @media screen and (min-width: 540px) {
  68.  
    html {
  69.  
    font-size: (540px / @no);
  70.  
    }
  71.  
    }
  72.  
     
  73.  
    // 720
  74.  
    @media screen and (min-width: 720px) {
  75.  
    html {
  76.  
    font-size: (720px / @no);
  77.  
    }
  78.  
    }
  79.  
     
  80.  
    // 750
  81.  
    @media screen and (min-width: 750px) {
  82.  
    html {
  83.  
    font-size: (750px / @no);
  84.  
    }
  85.  
    }
学新通

4.index.less中设置body基础

  1.  
    body {
  2.  
     
  3.  
    *width*: 15rem;
  4.  
     
  5.  
    *min-width*: 320px;
  6.  
     
  7.  
    *font-family*: Arial, Helvetica;
  8.  
     
  9.  
    *margin*: 0 auto;
  10.  
     
  11.  
    }

5.代码结构模块划分

学新通

6.代码书写

index.less代码：

  1.  
    body {
  2.  
    width: 15rem;
  3.  
    min-width: 320px;
  4.  
    font-family: Arial, Helvetica;
  5.  
    margin: 0 auto;
  6.  
    }
  7.  
     
  8.  
    @basefont : 50px;
  9.  
     
  10.  
    // 顶部搜索模块
  11.  
    .search-content {
  12.  
    display: flex;
  13.  
    position: fixed;
  14.  
    top: 0;
  15.  
    left: 50%;
  16.  
    -webkit-transform: translate(-50%);
  17.  
    transform: translate(-50%);
  18.  
    height: (88rem / @basefont);
  19.  
    width: 15rem;
  20.  
    background-color: #FFC001;
  21.  
     
  22.  
    .classify {
  23.  
    width: (44rem / @basefont);
  24.  
    height: (70rem / @basefont);
  25.  
    background: url(../images/classify.png) no-repeat;
  26.  
    background-size: (44rem / @basefont) auto;
  27.  
    margin: (11rem / @basefont) (25rem / @basefont) (7rem / @basefont) (24rem / @basefont);
  28.  
    }
  29.  
     
  30.  
    .search {
  31.  
    flex: 1;
  32.  
     
  33.  
    input {
  34.  
    height: (66rem / @basefont);
  35.  
    width: 100%;
  36.  
    border: 0;
  37.  
    outline: 0;
  38.  
    border-radius: (33rem / @basefont);
  39.  
    margin-top: (12rem / @basefont);
  40.  
    background-color: #FFF2CC;
  41.  
    font-size: (25rem / @basefont);
  42.  
    padding-left: (55rem / @basefont);
  43.  
    color: #757575;
  44.  
    }
  45.  
    }
  46.  
     
  47.  
    .login {
  48.  
    width: (75rem / @basefont);
  49.  
    height: (70rem / @basefont);
  50.  
    background-color: blue;
  51.  
    font-size: (25rem / @basefont);
  52.  
    color: #fff;
  53.  
    text-align: center;
  54.  
    line-height: (70rem / @basefont);
  55.  
    margin: (10rem / @basefont);
  56.  
    }
  57.  
    }
  58.  
     
  59.  
    // banner模块
  60.  
    .banner {
  61.  
    img {
  62.  
    width: 100%;
  63.  
    }
  64.  
    }
  65.  
     
  66.  
    //ad模块
  67.  
    .ad {
  68.  
    display: flex;
  69.  
     
  70.  
    a {
  71.  
    flex: 1;
  72.  
     
  73.  
    img {
  74.  
    width: 100%;
  75.  
    }
  76.  
    }
  77.  
    }
  78.  
     
  79.  
    //nav模块
  80.  
    .nav {
  81.  
    display: flex;
  82.  
    flex-wrap: wrap;
  83.  
     
  84.  
    a {
  85.  
    flex: 20%;
  86.  
    display: flex;
  87.  
    flex-direction: column;
  88.  
    align-items: center;
  89.  
    font-size: (25rem / @basefont);
  90.  
     
  91.  
    span {
  92.  
    margin: (10rem / @basefont) 0 (20rem / @basefont);
  93.  
    }
  94.  
     
  95.  
     
  96.  
    img {
  97.  
    width: (82rem / @basefont);
  98.  
    }
  99.  
    }
  100.  
    }
学新通

index.html结构

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="zh-CN">
  3.  
     
  4.  
    <head>
  5.  
    <meta charset="UTF-8">
  6.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.  
    <meta name="viewport" content="width=device-width, user-scalable=no,
  8.  
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  9.  
    <link rel="stylesheet" href="./css/normalize.css">
  10.  
    <link rel="stylesheet" href="./css/common.css">
  11.  
    <link rel="stylesheet" href="./css/index.css">
  12.  
    <title>suning </title>
  13.  
    </head>
  14.  
     
  15.  
    <body>
  16.  
    <!-- 顶部搜索模块 -->
  17.  
    <div class="search-content">
  18.  
    <a href="#" class="classify"></a>
  19.  
    <div class="search">
  20.  
    <!-- action 必需的 action 属性规定当提交表单时，向何处发送表单数据。 -->
  21.  
    <form action="#">
  22.  
    <input type="search" value="厨卫保暖季 哒哒哒">
  23.  
     
  24.  
    </form>
  25.  
     
  26.  
    </div>
  27.  
    <a href="#" class="login">登录</a>
  28.  
    </div>
  29.  
    <!-- banner模块 -->
  30.  
    <div class="banner">
  31.  
    <a href="#">
  32.  
    <img src="./uploads/banner.gif" alt="">
  33.  
    </a>
  34.  
    </div>
  35.  
    <!-- 广告部分 -->
  36.  
    <div class="ad">
  37.  
    <a href="#"><img src="./uploads/ad1.gif" alt=""></a>
  38.  
    <a href="#"><img src="./uploads/ad2.gif" alt=""></a>
  39.  
    <a href="#"><img src="./uploads/ad3.gif" alt=""></a>
  40.  
    </div>
  41.  
    <!-- nav模块 -->
  42.  
    <div class="nav">
  43.  
    <a href="#">
  44.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  45.  
    爆款手机
  46.  
    </a>
  47.  
    <a href="#">
  48.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  49.  
    爆款手机
  50.  
    </a>
  51.  
    <a href="#">
  52.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  53.  
    爆款手机
  54.  
    </a>
  55.  
    <a href="#">
  56.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  57.  
    爆款手机
  58.  
    </a>
  59.  
    <a href="#">
  60.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  61.  
    爆款手机
  62.  
    </a>
  63.  
    <a href="#">
  64.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  65.  
    爆款手机
  66.  
    </a>
  67.  
    <a href="#">
  68.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  69.  
    爆款手机
  70.  
    </a>
  71.  
    <a href="#">
  72.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  73.  
    爆款手机
  74.  
    </a>
  75.  
    <a href="#">
  76.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  77.  
    爆款手机
  78.  
    </a>
  79.  
    <a href="#">
  80.  
    <span><img src="./uploads/nav1.png" alt=""></span>
  81.  
    爆款手机
  82.  
    </a>
  83.  
    </div>
  84.  
    </body>
  85.  
     
  86.  
    </html>
学新通

最后补充：

1.需要下载的插件：easyless less保存自动生成css文件

2.less中引入其他less文件 @import ‘文件名.less’ 要点 一定要有空格，文件名要用引号包裹

3.剩余的flexible.js 使用 下次再做补充

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgehjee
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群