精华内容
下载资源
问答
  • rem布局
    2022-04-30 21:28:07

    rem布局 学习rem 先学em
            1.em 是指父元素的字体大小
            2.rem 是指html的字体大小
            3.rem 布局是用 媒体查询来改变(js改变)HTML的字体大小来实现自适应
            rem 的优点就是可以通过修改html里面的文字大小来改变页面中元素的控制大小

    rem其实不是布局 是单位
            rem适配方案原理 (动态更改html的字体大小)

    布局方式有两种

    1. rem+媒体查询
    2. js+rem

    rem+媒体查询  (动态设置方法)

    1. 假设我们的设计稿是750
    2. 假设我们把整个屏幕划分为15份(划分的份数可以是10或者20)
    3. 每一份作为HTML字体大小,这里是50px   750/15= 50
    4. 那么在320px设备的时候,字体大小是320/15=31.33px
    5. 用我们页面元素的大小除以不同的HTML字体大小会发现他们比例是相同的(比如要个100px的盒子就是 100px/50字体=2rem,用100px/31.33字体=3.1rem 多是100px的盒子)
    6. 比如我们以750为标准设计稿
    7. 一个100*100像素的页面元素在750屏幕下,就是100/50 转换为rem 是 2rem*2rem 比例是 1比1
    8. 320屏幕下,html字体大小为21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
    9. 但是已经能实现不同屏幕下,页面元素盒子等比例缩放的效果

    元素大小取值方法、

    1. 最后公式:页面元素的rem值 = 页面元素值 px / (屏幕宽度 / 划分的份数)也就是HTML字体大小
    2. 屏幕宽度 / 划分的份数 就是 html font-size的大小
    3. 或者:页面元素的rem值 = 页面元素值px  /  html font-size 的大小

    方法

    rem + 媒体查询 实现元素动态大小变化
    		* {
    			margin: 0px;
    			padding: 0px;
    		}
    		@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: 0.5rem;
    			color: #fff;
    			text-align: center;
    			line-height: 1rem;
    			background-color: pink;
    		}

    js+rem 

    1. 比较简单(因为用了js)
    2. 我们只用设置 页面元素的px值 / 75 就行 (因为js算好了 HTML的字体大小 但是他是除10的) 

    js代码

    (function flexible (window, document) {
      var docEl = document.documentElement
      var dpr = window.devicePixelRatio || 1
    
      // adjust body font size
      function setBodyFontSize () {
        if (document.body) {
          document.body.style.fontSize = (12 * dpr) + 'px'
        }
        else {
          document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
      }
      setBodyFontSize();
    
      // set 1rem = viewWidth / 10
      function setRemUnit () {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
      }
    
      setRemUnit()
    
      // reset rem unit on page resize
      window.addEventListener('resize', setRemUnit)
      window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
          setRemUnit()
        }
      })
    
      // detect 0.5px supports
      if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
          docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
      }
    }(window, document))
    

     小推荐

    vscode cssrem插件 px转换rem   就不用算了 但要改一下vscode编辑器的字体大小 改为页面的字体大小就行

    更多相关内容
  • rem布局原理解析

    2020-12-14 03:35:17
    rem是现在主流的移动端自适应布局方案,本文主要介绍了rem布局的原理和通用方案 原理 首先说一下,我们想要达到的自适应效果是什么。很简单:元素、字体大小能随着屏幕大小(一般相对于宽度来说)变化而变化,在大...
  • 主要介绍了vue 实现 rem 布局的 或者 vw 布局的方法,本文给提供多种方法,需要的朋友可以参考下
  • 移动端 REM布局 与 Viewport (VW) 布局的实例运用
  • 1、npm i amfe-flexible 2、import ‘amfe-flexible‘ 然后再,安装postcss-px2rem...rem布局由于其根据屏幕宽度的改变修改相应的rem与px的转换比例,这样非常适合移动端的项目。 在不同的分辨率下,都会有较好的显示
  • REM布局实例代码 var fontSizeInit = function() { var doc = document.documentElement, cli = doc.clientWidth; cli&&(cli/=320,2<cli&&(cli=2),doc.style.fontSize=16*cli+px); } font
  • rem 布局

    千次阅读 2021-06-20 09:00:01
    rem布局 rem单位 rem(root em)是一个相对单位,基准是相对html元素字体大小,类似em(父元素字体大小) 比如,根元素(html)设置font-size=12px,非根元素设置width:2rem;,转换成px就是24px。 rem的优势:父元素...

    rem布局

    rem单位

    • rem(root em)是一个相对单位,基准是相对html元素字体大小,类似em(父元素字体大小)
    • 比如,根元素(html)设置font-size=12px,非根元素设置width:2rem;,转换成px就是24px。
    • rem的优势:父元素文字大小可能不一致,但是整个页面只有一个html,可以很好的来控制整个页面的元素大小比例。

    媒体查询

    媒体查询(Media Query)是CSS3新语法。

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

    媒体查询语法规范

    • 用@media 开头,注意@ 符号
    • mediatype媒体类型
    • 关键字 and not only
    • media feature 媒体特性,必须有小括号包含

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

    mediatype 媒体类型

    将不同的终端设备划分成不同的类型,称为媒体类型

    解释说明
    all用于所有设备
    print用于打印机和打印预览
    screen用于电脑屏幕、平板电脑、智能手机等

    关键字

    关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

    • and:可以将多个媒体特性连接到一起,相当于“且”的意思
    • not:排除某个媒体类型,相当于“非”的意思,可以省略
    • or:可以测试多个媒体查询的条件,主要有一个条件成立,就执行,“或”的意思。
    • only:指定某个特定的媒体类型,可以省略。

    媒体特性

    每种媒体类型都有具体个字不同的特性,根据不用媒体类型的媒体特性设置不同的展示风格。媒体特性要加小括号进行包含。

    解释说明
    width定义输出设备中页面可见区域的宽度
    min-width定义输出设备中页面最小可见区域的宽度
    max-width定义输出设备中页面最大可见区域宽度
    在屏幕设备中,判断屏幕尺寸大于等于800px的时候   
    @media screen and (min-width: 800px) {
        body {
            background-color: pink;
        }
    }
    在屏幕设备中,判断屏幕尺寸最大为600px的时候屏幕为绿色
    @media screen and (max-width: 600px) {
       body {
            background-color: green;
        }
    }
    

    案例

    屏幕小于等于539px时,背景为蓝色;屏幕大于等于540px并且小于969px时,屏幕为绿色;当屏幕大于等于970px 时,屏幕为红色。

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

    媒体查询+rem实现元素动态大小变化

    • rem单位是跟着html来走的,有了rem 页面元素可以设置不同大小尺寸
    • 媒体查询可以根据不同设备宽度来修改样式
    • 媒体查询+rem就可以实现不同设备宽度,实现页面元素的动态大小

    媒体查询第二种引入方式

    引入资源

    • 当样式比较繁多的时候,我们可以针对不用的媒体使用不同stylesheets(样式表)。

    • 原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。

    • 语法规范

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
    
    • 示例
    <link rel="stylesheet" href="styleA.css" media="screen and (min-width:400px)">
    

    维护css弊端

    css是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念

    • css需要书写大量看似没有逻辑的代码,css冗余度是比较高的。
    • 不方便维护及扩展,不利于复用
    • css没有很好的计算能力
    • 非前端开发工程师来讲,往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目

    Less

    less介绍

    • Less(Leaner Style Sheets)是一门css扩展语言,也称为css预处理器
    • 作为css的一种形式的扩展,它并没有减少css的功能,而是在现有的css语法上,为css加入程序式语言的特性
    • 它在css的语法基础之上,引入了变量、Mixin(混入)、运算以及函数等功能,大大简化了css的编写,并且降低了css的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事

    Less中文网址: http://Lesscss.cn/
    常见的css预处理器:Sass、Less、Stylus
    总结:Less是一门css预处理语言,它扩展了css的动态特性。

    Less使用

    新建一个后缀名为.less的文件,在这个.less文件里书写less语句

    • Less 变量
    • Less 编译
    • Less 嵌套
    • Less 运算

    Less变量

    • 变量是指没有固定的值,可以动态改变的。因为css中的一些颜色和数值等经常使用
    • @变量名:值;
    1. 变量命名规范
      • 必须有@为前缀
      • 不能包含特殊字符
      • 不能以数字开头
      • 大小写敏感
        例如:
    @pink:pink;
    
    div {
        background-color: @pink;
    }
    
    1. 变量使用规范

    Less编译

    • 本质上,Less包含一套自定义的语法以及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的css文件。
    • 所以,我们需要把我们的.less文件,编译生成为.css文件,这样我们的html页面才能使用它
    • 推荐方法(nodejs):在当前文件夹,使用cmd命令“lessc style.less>style.css"
    • 使用Vscode插件可直接转换

    Less嵌套

    1. 后代选择器
    div {
        width: 500px;
        height: 400px;
        background-color: yellow;
        .box {
            height: 200px;
            background-color: green;
        }
    }
    
    1. 在前面加上&符号,表示两个选择器交集或伪类。
    • a 里面加上&.box,就表示选中的是有box类名的a标签。
    • :hover前加&符,表示a的hover,不加则是a内元素的hover。
    .nav {
        width: 200px;
        height: 200px;
        background-color: #fff;
        a {
            display: block;
            width: 100px;
            height: 100px;
            background-color: blue;
            &.box {
                background-color: pink;
            }
            &:hover {
                color: yellow;
            }
        }
    }
    

    Less运算

    • 任何数字、颜色或者变量都可以参与运算。Less提供了加(+)减(-)乘(*)除(/) 算数运算。
    • 除法运算时需要()括起来或者./这么写,不然系统会默认我们写的是两个值,将不会生效。(推荐使用小括号,./是强制除法,可能会出现错误)
    • 当有两个单位时候,取值第一个单位,200rem ./ 50px 结果是4rem(后面的数字不写单位也可以),如果只有一个值有单位,就取该单位。
    • 运算符号左右需要加空格
    div {
        width: 100px + 20px;
        height: (200px / 2);
        height: 200rem ./ 50px;
        height: 200rem ./ 50;
        background-color: orange;
    }
    

    rem适配方案

    • 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。
    • 使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。

    rem适配方案技术使用(市场主流)

    1. 技术方案一

      • less
      • 媒体查询
      • rem
      • flexible.js
      • rem

    总结

    • 两种方案现在都存在
    • 方案二更简单

    rem实际开发适配方案1

    rem+媒体查询+less技术

    设计稿常见尺寸宽度

    设备常见宽度
    iphone4、5640px
    iphone678750px
    Android常见320px、480px、540px 600px 720px 768px 800px 1080px (目前市场主流设备 尺寸按照1080px设计)

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

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

    1. 假设设计稿是750px
    2. 假设我们把屏幕划分为15等份(划分标准不一定,可以是20份也可以是10等份)
    3. 每一份作为html字体大小,这里就是50px
    4. 那么在320px设备的时候,字体大小就是320/15 就是21.33px
    5. 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的

    以750标准设计稿为例:

    1. 一个100*100像素的页面元素在750屏幕下,就是100/50,转换为rem是2rem*2rem ,比例是1比1
    2. 320屏幕下,html字体大小为21.33则2rem=42.66px,此时宽和高都是40.66,但是宽和高的比例还是1比1
    3. 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

    公式

    1. 页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
    2. 屏幕宽度/划分的份数 就是html font-size字体大小
    3. 页面元素的rem值=页面元素值(px)/html font-size字体大小
    展开全文
  • SuNing(rem布局).zip

    2021-04-18 11:51:16
    rem布局实现苏宁移动端(仿写)
  • rem:移动端rem布局

    2021-05-09 16:13:18
    移动端rem布局rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 ./js/rem.js中 默认设计稿宽度为640 1rem =100px 可自行修改HOW TO USE设置移动端网页专用的viewport meta,至少需要包含width=...
  • rem布局案例

    2019-03-29 19:43:13
    使用了less和rem结合的仿照京东手机端的一个小案例demo
  • 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。
    小编今天的分享就结束了。逆战班加油!

    展开全文
  • cube-rem-demo a cube-ui demo with rem layout Build Setup # install dependencies(安装依赖) npm install # serve with hot reload at localhost:8080(开发环境) npm run dev # build for production with ...
  • rem布局实现不同分辨率移动终端的自适应、整体缩放。另外界面UI也很不错哦! 本附件相关博文地址:http://blog.csdn.net/irokay/article/details/78935838
  • 网页布局之 - rem布局

    千次阅读 2022-04-21 17:44:21
    一、rem布局是什么? 相对单位,相对于HTML标签字号计算尺寸 1rem = 1HTML标签字号 给HTML标签添加字号 设置元素尺寸为rem单位 效果展示: 代码如下: <head> <meta charset="UTF-8"> ...

    实现在不同宽度的设备中,网页元素尺寸等比缩放效果


    目录

    一、rem布局是什么?

    二、媒体查询基本使用

    三、rem布局流程

           1.媒体查询添加根字号

            2.flexible添加根字号


    一、rem布局是什么?

    相对单位,相对于HTML标签字号计算尺寸

    1rem = 1HTML标签字号

    • 给HTML标签添加字号

    • 设置元素尺寸为rem单位

    效果展示:

    代码如下:

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>rem基本使用</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /* 1rem=1根字号的大小 */
            /* 1.html有字号 */
            /* 2.盒子添加尺寸,单位是rem */
            html {
                font-size: 20px;
            }
            .box {
                width: 5rem;
                height: 3rem;
                background-color: #ccc;
            }   
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>

     二、媒体查询基本使用

    视口不同,添加不同的根字号

    @media (视口宽度) {

    差异化CSS样式

    }

    效果展示:

    代码如下:

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 设备宽度不同,根字号不同 */
            /* 如果检测到 设备的宽度是320的时候 大括号的css才生效 */
            @media (width :320px) {
                html {
                    font-size: 32px;
                }
                body {
                    background-color: #ccc;
                }
            }
            @media (width :375.2px) {
                html {
                    font-size: 40px;
                }
                body {
                    background-color: pink;
                }
            }
        </style>
    </head>
    <body>
    </body>

     三、rem布局流程

    1.媒体查询添加根字号

    @media (视口宽度) {

      html {

         font-size: 37.5px;

      }

    }

    效果及代码展示:

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>rem适配</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }     
            /* 原则:rem:根字号=视口的宽度1/10 */
            /* 320,375,414 */
            @media (width: 320px) {
                html {
                    font-size: 32px;
                }
            }
            @media (width: 375.2px) {
                html {
                    font-size: 37.5px;
                }
            }
            @media (width: 414.4px) {
                html {
                    font-size: 41.4px;
                }
            }
            .box {
                width: 5rem;
                height: 3rem;
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>

     2.flexible添加根字号

    <script src="flexible.js"></script

    效果展示: html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>rem开发流程</title>
        <link rel="stylesheet" href="./demo.css">
    </head>
    <body>
        <div class="box"></div>
    
        <script src="../js/flexible.js"></script>
    </body>
    </html>

    css代码段: 

    /* box 68*29 */
    /* 1.媒体查询,设置不同设备的根字号 */
    /* @media (width: 320px) {
        html {
            font-size: 32px;
        }
    }
    @media (width: 375.2px) {
        html {
            font-size: 37.5px;
        }
    }
    @media (width: 414.4px) {
        html {
            font-size: 41.4px;
        }
    } */
    
    /* 2.写box的盒子模型,单位rem */
    .box {
        width: 1.813rem;
        height: 0.773rem;
        background-color: #ccc;
    }
    展开全文
  • rem原理和简介(1).字体单位单位的值是根据html根元素大小而定,同样可以作为宽度高度单位(2).适配原理将px替换为rem,动态修改html的font-size适配(3).单位1rem=16px,why? F12中1rem在computed中font-size属性中会显示...
  • Rem布局的原理解析

    2020-01-13 15:51:21
    Rem布局的原理解析 tobAlier关注 22017.10.25 11:27:32字数 2,630阅读 12,367 什么是Rem rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先...
  • 文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less 移动端Web开发 流式布局 在PC端进行网页制作时,经常使用固定像素的网页布局,但这种布局方式对小屏幕的设备不友好。为了适应小...
  • 我们希望在任何一个设备中的呈现比例都与视觉稿中一样,根据布局视口宽度等比缩放。 在移动端我们一般会设置布局视口宽度=设备宽度,即内容呈现的区域在设备屏幕内。 <meta name="viewport" content="width=...
  • 据了解,现在有两种rem布局的样式控制,其中一种是通过css的媒体查询,另外一种是通过引入js来控制,这两种方法各有各的优点,但是我还是喜欢用引入js的方法来实现rem布局,尽管现在市面上大多数都在使用css媒体查询...
  • rem简介: rem 是 CSS3 新增的一个相对单位,相对于根节点(html)字体大小的值,r 就是 root html{font-size:10px} 则 2rem=20px 通过它就可以做到只修改根元素的大小,就能成比例地调整所有的字体大小,只依赖 html...
  • 思考一下问题,有便于下面学习rem布局。 页面布局文字能否岁屏幕的大小变化而变化? 流式布局和flex布局主要针对于宽度布局,那高度如何设置?(之前都是写死的高度) 怎样让屏幕发生变化的时候元素高度和宽度等...
  • Vue 使用 rem布局

    2021-10-14 17:59:32
    Vue 使用 rem布局 1、rem布局需要安装两个插件 npm i lib-flexible -S npm i postcss-pxtorem -D lib-flexible: 根据移动端屏幕大小而对应改变html的fontSize postcss-pxtorem: 根据html的fontSize将px单位改变...
  • 目录 1、rem布局 2、flex布局 3、媒体查询-响应式布局 ​4、event loop 5、宏任务/微任务 6、async/await 8、Promise.all 9、dataset 10、事件代理 1、rem布局 html{font-size: 16px} div{font-size: 1rem} 这里的...
  • JavaScript-rem布局

    2021-11-23 19:35:41
    JavaScript-rem布局 一、什么是Rem rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下em: em作为font-size的单位时,其代表父元素的字体...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,925
精华内容 11,570
关键字:

rem布局

友情链接: 屏蔽鼠标按键.rar