精华内容
下载资源
问答
我要提问

  • rem布局

     2019-08-17 23:43:33
    rem布局 1.rem rem :root em 是一个相对单位，类似于em ,em是父元素字体大小； rem的基准是相对于HTML元素字体大小 /* 根html 为 16px */ html { font-size: 16px; } /* 此时 div 的字体大小就是 32px */ div { ... 
    rem布局
     

    1.rem
     

    rem :root em 是一个相对单位，类似于em ,em是父元素字体大小；
     

    rem的基准是相对于HTML元素字体大小
     

    /* 根html 为 16px */
html {
   font-size: 16px;
}
/* 此时 div 的字体大小就是 32px */       
div {
    font-size: 2rem;
}

     

    2.rem布局准备工作
     

    基本思路：方案:1：媒体查询+less+rem ；
     

    方案2：flexible.js+rem
     

    项目设计稿750px尺寸
     

    2.1 设置视口标签
     

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

     

    2.2 媒体查询屏幕不同尺寸
     

    /*尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px*/
html {
    font-size: 50px;
}
// 屏幕划分为 15
@number: 15; 
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @number;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @number;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @number;
    }
}

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

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

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

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

     

    2.3 元素取值
     

    ①公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
     

    ②屏幕宽度/划分的份数，就是每一份的大小，而每一份大小就是 html font-size 的大小
     

    ③页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
     

    2.4 less文件
     

    less文件自动转换为css文件
     

    less变量：
     

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

    less运算：
     

    任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
     

    2.5 有点复杂，略，可以留言
    收起
    展开全文
    移动web布局 less

  • Rem布局

     2020-03-08 18:45:34
    Rem布局？什么东西？？？Rem布局又称等比缩放布局，是移动端布局中常用的一种布局方式。Rem布局可以通过两种方式实现，一种通过JavaScript实现；还有一种通过vw实现。在这里小编主要讲述第二种方式。 下面小编先简单... 
    Rem布局？什么东西？？？Rem布局又称等比缩放布局，是移动端布局中常用的一种布局方式。Rem布局可以通过两种方式实现，一种通过JavaScript实现；还有一种通过vw实现。在这里小编主要讲述第二种方式。
     下面小编先简单的说一下rem布局的优缺点：
     优点：在不同的设备下看起来比较协调，内容会随着设备屏幕的大小进行等比缩放。
     缺点: 随着屏幕的变大或缩小不会展现更多的内容。
     它的优缺点小编就说的这里，下面进入重点rem布局原理：正所谓敌不动我不动，rem布局就是采用这样的战术手法。使页面元素动态化，在不同的设备上显示的元素比例也是一样的。就比如，现在拥有一台横向屏幕分辨率为375px的设备，在其中放上一张100100px的图片，使用Rem布局过后，在另外一台横向屏幕分辨率为414px的设备，这张照片的大小就变成了110px110px。这样就可以适配在不同的设备中进行等比缩放。
     小编说了那么多还不如实例来的痛快，下面进入编程状态：
     在这里插入图片描述
     在这里插入图片描述
     小伙伴们是否会对图中的vw、rem这些单位疑惑，小编将细解这些单位：
     Rem：是一个相对单位，1rem等于根元素的font-size值，1rem == 1个根元素的font-size大小 就是 1个html标签的font-size大小。
     vw: view width，也是一个相对单位。但是它表示为把屏幕自动分成了100vw宽。
     vh : view height，表示为把屏幕自动分成了100vh高。
     100vw就等于屏幕宽的100%，如图：
     在这里插入图片描述
     那么1vw就等于屏幕宽的1%。
     假设屏幕是375px那么就等于100vw 所以 1vw = 3.75px。那么100px=26.66667vw。图1中1rem=26.66667vw=100px。
     假设屏幕是414px那么就等于100vw 所以 1vw = 4.14px。那么110px=26.66667vw（100px=24.154589）。图2中1rem=26.66667vw=110px。
     小编今天的分享就结束了。逆战班加油！
    收起
    展开全文

  • rem 布局

     2020-11-09 00:14:30
    rem布局，最为直观的效果，页面全部元素现实等比缩放，包括文字，盒子大小； rem 单位 rem单位，可以控制整个页面所有元素有关PX类；（宽、高、padding、margin、top…）只要是你设置数值的地方都可以实现控制； ... 
    rem 布局
     

    • 流式布局、flex布局在宽度上控制的布局，高度写死；
    • rem布局，最为直观的效果，页面全部元素现实等比缩放，包括文字，盒子大小；
     

    rem 单位
     

    • rem单位，可以控制整个页面所有元素有关PX类；（宽、高、padding、margin、top…）只要是你设置数值的地方都可以实现控制；
     

    语法
     

    • root: 1rem=HTML的font-size大小；
    • 语法：
     

    /* 1.根html 为 15px */
html {
   font-size: 15px;
}

/* 2.此时 div 的宽就是 100px */       
div {
    width: 10rem;
}

     

    • 特点：绝对的唯一控制；
     

    媒体查询
     

    •  
      作用：响应屏幕的变化；
       
    •  
      该可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示；
       
     

    语法
     

    • CSS3 新语法，是一个查询屏幕的过程，通过查询当前屏幕尺寸属于哪个范围，从而有哪个范围的样式生效；
    • mediatype (media feature) 都是它的查询条件
     

    @media mediatype and|not|only (media feature) {
    CSS-Code;
}

     

    •  
      mediatype：媒体类型；查询不同的终端设备 ； screen最为常用：查询当前设置的屏幕；
       
       
    •  
      and|not|only：关键字；将多个条件连接在一起共同查询；
       
  
      • and：可以将多个媒体特性连接到一起，相当于“且”的意思；最为常用；生活中：“我既要娶白富美，又要走上人生颠覆”；
      • not：排除 某个 媒体类型，相当于“非”的意思，可以省略。生活：“我喜欢看电影，除了恐怖片”；
      • only：指定某个特定的 媒体类型，可以省略。 生活：“我这辈子非你不嫁”；
       
    •  
      (media feature)：媒体特性；
       
  
      • 对于屏幕 screen，屏幕的宽度就是一个特性；
         在这里插入图片描述
       
    •  
      实例：
       
  
      • 查询条件加小括号；
      • min-width/max-width：最小界值，最大界值；查询条件包含等于号；
       
     

    /* 宽度的最小界值500px，大于等于500px */
@media screen and (min-width:500px) {
    body {
        background-color: red;
    }
}

     

    档位划分
     

    • 划分要求： 
  
      • 档位1：w<540px w <= 539px;
      • 档位2: 540px<= w and w< 640px;
      • 档位3: 640px<= w
       
     

     

    • 语法实现：
     

            @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        @media screen and (min-width: 540px) and (max-width: 639px) {
            body {
                background-color: green;
            }
        }
        @media screen and (min-width: 640px) {
            body {
                background-color: red;
            }
        }

     

    • 第二档位可简写为：
     

            @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }

     

    • 图示：
     

     

    • 特点：划分屏幕，等待变化；
     

    资源引入（了解即可）
     

    • 语法：不常用
     

    <!-- 320px~640px -->
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<!-- n>=640px -->
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

     

    rem+媒体查询 初体验
     

    • rem布局的核心：rem+媒体查询；
     

    等比!!!
     

    •  
      rem布局的效果是 等比，理解等比是我们学习的关键。
       
    •  
      等比的效果：无论怎么发生等比变化，有一个比例一直是不变的；那么是哪个比例？
       
    •  
      图示:
       
     

     

    • 重点： 
  
      • 图在宽度方向划分为三个基础块，缩放前后，相同份数；
      • 其实分为几份没有关系，最为重要是缩放前后要份数相同；
       
    • 等比变化的核心： 
  
      • 等比变化前后，宽高方向需要的份数相同，
      • 基础块变化，整个就是等比缩放；
       
     

    初体验
     

    • rem：唯一控制；只要用rem作为单位，当 HTML字体大小发生改变，使用rem单位元素都会发生改变；
    • 媒体查询：把屏幕划分不同档位，等待变化；
    • 加在一起：划分屏幕，等待变化；变化谁？变化唯一控制 rem（HTML字体大小）
    • 语法：
     

        @media screen and (min-width: 320px) {
      html {
        font-size: 50px;
      }
    }
    
    @media screen and (min-width: 640px) {
      html {
        font-size: 100px;
      }
    }
    
    .top {
      width:1.75rem;
      height:5.25rem;
    }

     

    • rem布局的核心： 
  
      • 媒体查询：屏幕到达不同的范围下，HTML的font-sizing大小会有不同的取值;
      • HTML 字体大小 = 1rem
      • rem：那么使用rem单位的元素就会发生等比的变化；
    收起
    展开全文
    css html5 html 前端 less

  • REM布局

     2018-06-02 19:18:39
    REM布局 1.什么是Rem： rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em em作为font-size的单位时，其代表父元素的字体大小，em... 
    REM布局
     

    1.什么是Rem：
     

    rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em
     

     
 
    em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN
     

     

    那么一个问题是：s1、s2、s5、s6的font-size和line-height分别是多少px
     

    <div class="p1">
    <div class="s1">1</div>
    <div class="s2">1</div>
</div>
<div class="p2">
    <div class="s5">1</div>
    <div class="s6">1</div>
</div>


.p1 {font-size: 16px; line-height: 32px;}
.s1 {font-size: 2em;}
.s2 {font-size: 2em; line-height: 2em;}

.p2 {font-size: 16px; line-height: 2;}
.s5 {font-size: 2em;}
.s6 {font-size: 2em; line-height: 2em;}
     

    答案如下：
     

    p1：font-size: 16px; line-height: 32px
s1：font-size: 32px; line-height: 32px
s2：font-size: 32px; line-height: 64px 
     

    p1 无需解释 
     s1 em作为字体单位，相对于父元素字体大小；line-height继承父元素计算值 
     s2 em作为行高单位时，相对于自身字体大小
     

    p2：font-size: 16px; line-height: 32px
s5：font-size: 32px; line-height: 64px
s6：font-size: 32px; line-height: 64px 
     

    p2 line-height: 2自身字体大小的两倍 
     s5 数字无单位行高，继承原始值，s5的line-height继承的2，自身字体大小的两倍 
     s6 无需解释
     

    em可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能，但其复杂的计算让人诟病，em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算。
     

    这时候，rem就出现了：
     

     
 
    rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN
     

     

    rem取值分为两种情况，设置在根元素时和非根元素时，举个例子
     

    /* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html {font-size: 2rem}

/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p {font-size: 2rem}
     

    em是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；而rem的有点在于统一的参考系
     

    2. Rem布局原理
     

    rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UI图能够等比缩放，那该多么美好啊
     

    假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比
     

    p {width: 50x} /* 屏幕宽度的50% */ 
     

    如果想要页面元素随着屏幕宽度等比变化，我们需要上面的x单位，不幸的是css中并没有这样的单位，幸运的是在css中有rem，通过rem这个桥梁，可以实现神奇的x
     

    通过上面对rem的介绍，可以发现，如果子元素设置rem单位的属性，通过更改html元素的字体大小，就可以让子元素实际大小发生变化
     

    html {font-size: 16px}
p {width: 2rem} /* 32px*/

html {font-size: 32px}
p {width: 2rem} /*64px*/
     

    如果让html元素字体的大小，恒等于屏幕宽度的1/100，那1rem和1x就等价了
     

    html {fons-size: width / 100} 
     p {width: 50rem} /* 50rem = 50x = 屏幕宽度的50% */ 
     如何让html字体大小一直等于屏幕宽度的百分之一呢？ 可以通过js来设置，一般需要在页面dom ready、resize和屏幕旋转中设置
     

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'; 
     

    那么如何把UI图中的获取的像素单位的值，转换为已rem为单位的值呢？公式是元素宽度 / UI图宽度 * 100，让我们举个例子，假设UI图尺寸是640px，UI图中的一个元素宽度是100px，根据公式100/640*100 = 15.625
     

    p {width: 15.625rem}
     

    下面来验证下上面的计算是否正确，下面的表格是UE图等比缩放下，元素的宽度
     

    UI图宽度UI图中元素宽度
    640px100px
    480px75px
    320px50px
     

    下面的表格是通过我们的元素在不同屏幕宽度下的计算值
     

    页面宽度html字体大小p元素宽度
    640px640/100 = 6.4px15.625*6.4=100px
    480px480/100=4.8px15.625*4.8=75px
    320px320/100=3.2px15.625*3.2=50px
     

    可以发现，UI图宽度和屏幕宽度相同时，两边得出的元素宽度是一致的
     

    3.比Rem更好的方案
     

    上面提到想让页面元素随着页面宽度变化，需要一个新的单位x，x等于屏幕宽度的百分之一，css3带来了rem的同时，也带来了vw和vh
     

     
 
    vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100 —— MDN
     

     

    /* rem方案 */
html {fons-size: width / 100}
p {width: 15.625rem}

/* vw方案 */
p {width: 15.625vw}
vw还可以和rem方案结合，这样计算html字体大小就不需要用js了

html {fons-size: 1vw} /* 1vw = width / 100 */
p {width: 15.625rem}
     

    rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询
     

    一般内容型的网站，都不太适合使用rem，因为大屏用户可以自己选择是要更大字体，还是要更多内容，一旦使用了rem，就剥夺了用户的自由，比如百度知道，百度经验都没有使用rem布局；一些偏向app类的，图标类的，图片类的，比如淘宝，活动页面，比较适合使用rem，因为调大字体时并不能调大图标的大小
     

    rem可以做到100%的还原度，但同事rem的制作成本也更大，同时使用rem还有一些问题，下面我们一一列举下：
     

    首先是字体的问题，字体大小并不能使用rem，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小？？？
     

    我们可以在body上做字体修正，比如把body字体大小设置为16px，但如果用户自己设置了更大的字体，此时用户的设置将失效，比如合理的方式是，将其设置为用户的默认字体大小
     

    html {fons-size: width / 100}
body {font-size: 16px} 
     

    那字体的大小如何实现响应式呢？可以通过修改body字体的大小来实现，同时所有设置字体大小的地方都是用em单位.因为只有em才能实现同步变化，em就是为字体而生的。
     

    @media screen and (min-width: 320px) {
    body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    body {font-size: 18px}
}
@media screen and (min-width: 641px) {
    body {font-size: 20px}
}

p {font-size: 1.2em}
p a {font-size: 1.2em}
     

    第二，如果用户在PC端浏览，页面过宽怎么办？一般我们都会设置一个最大宽度，大于这个宽度的话页面居中，两边留白
     

    var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + 'px';
//设置body的宽度为100rem，并水平居中

body { margin: auto; width: 100rem } 
     

    3.完整的例子
     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>rem布局</title>
</head>
<body>
    <noscript>开启JavaScript，获得更好的体验</noscript>

    <div class="p1">
        宽度为屏幕宽度的50%，字体大小1.2em
        <div class="s1">
            字体大小1.2.em
        </div>
    </div>

    <div class="p2">
        宽度为屏幕宽度的40%，字体大小默认
        <div class="s2">
            字体大小1.2em
        </div>
    </div>
</body>
</html>
     

    css代码如下
     

    html {
    font-size: 32px; /* 320/10 */
}
body {
    font-size: 16px; /* 修正字体大小 */
    /* 防止页面过宽 */
    margin: auto;
    padding: 0;
    width: 10rem;
    /* 防止页面过宽 */
    outline: 1px dashed green;
}

/* js被禁止的回退方案 */
@media screen and (min-width: 320px) {
    html {font-size: 32px}
    body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 48px}
    body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
    html {font-size: 64px}
    body {font-size: 20px;}
}

noscript {
    display: block;
    border: 1px solid #d6e9c6;
    padding: 3px 5px;
    background: #dff0d8;
    color: #3c763d;
}
/* js被禁止的回退方案 */

.p1, .p2 {
    border: 1px solid red;
    margin: 10px 0;
}

.p1 {
    width: 5rem;
    height: 5rem;

    font-size: 1.2em; /* 字体使用em */
}

.s1 {
    font-size: 1.2em; /* 字体使用em */
}

.p2 {
    width: 4rem;
    height: 4rem;
}
.s2 {
    font-size: 1.2em /* 字体使用em */
}
     

    js代码如下
     

    var documentElement = document.documentElement;

function callback() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕宽度大于780，不在放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;
    documentElement.style.fontSize = clientWidth / 10 + 'px';
}

document.addEventListener('DOMContentLoaded', callback);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);
     

    以上为目前学到的的关于rem布局的内容。
    收起
    展开全文

  • REM 布局

     2016-12-20 11:26:00
    实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,如不同html字体大小的计算下,rem值不同 第一个例子： html{font-... 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        20 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    24,312
            

            

                精华内容
                    9,724
            

        

        

            
热门标签

            
        


        


        

            关键字：
rem布局