精华内容
下载资源
问答
  • 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 有点复杂,略,可以留言

    展开全文
  • 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单位的元素就会发生等比的变化;
    展开全文
  • 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字体大小就不需要用jshtml {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布局