使用rem的原理，62.5%，根据屏幕宽度等比压缩网页

时间：2021-07-07 00:08:17

一、前言

　　我们在编写网页时，往往需要兼顾网页在不同屏宽情况下的显示

　　而有时为了省事，没时间写新的页面，也为了兼容考虑，这就需要使用等比压缩了

　　等比压缩的核心是rem

二、正文

（一）、rem的使用

　    rem是css3中新增加的一个单位属性(font size of the root element)

　　相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

　　rem的在桌面浏览器上的初始值是16px（即1rem = 16px）

<!-- rem的初始赋值 -->

<html style="">

    <head></head>

    <body>

         <div style="font-size: 1rem">此处的1rem即设备的默认字体大小，桌面浏览器默认字体大小是16px</div>

    </body>

</html>

<html style="font-size: 12px">

    <head></head>

    <body>

         <div style="font-size: 1rem">此处的1rem即12px</div>

    </body>

</html>

　　当然还可以在css上进行初始赋值，或者使用js进行动态的初始赋值

/*使用css进行rem的初始赋值*/

html{

      font-size:  14px;    /*此处的初始赋值表示1rem=14px*/

}

（二）、rem的 62.5% 和 10px的区别

　　在桌面浏览器上 font-size 的默认值是16px;

　　可知 font-size: 62.5%; 即表示10px  （通过计算 16 * 62.5% = 10 得到）

　　那么 font-size: 62.5%;   和  font-size: 10px; 的区别在什么地方呢？

　　比较好的解释：

　　　　桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的；

　　　　但是其他类型的设备的默认字体大小不一定是16px，

　　　　特别是高分辨率的设备，16px大小的字体在它们上面看起来会非常小，所以不能在body上设置具体像素值，

　　　　设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。

　　《响应式Web设计实践》书中原文：最重要的不是屏幕实际的像素大小，屏幕上文字的可读性才是最重要的。

　　原文地址https://segmentfault.com/q/1010000002411895　

（三）、正确的rem使用方法

　　如上文所述：

　　使用  font-size: 62.5%; 更好

/*rem的初始赋值*/

html{

      font-size:  62.5%;    /*此处的初始赋值表示1rem=10px*/

}

　　然而坑无处不在。。。

　　新的问题： 我们开发常用的chrome浏览器，支持的最小字体大小是12px，

/*rem在不同浏览器下的结果*/

html{

    font-size:62.5%;

}

header{

    height:8rem;    /*在其他浏览器表示80px，在chrome上表示96px*/

}

　　解决办法：

　　font-size:625%;

　　1rem = 100px， 以此为单位进行换算，可以避免以上问题的出现

（四）、em 和 rem的区别

　　rem是相对于根节点的font-size计算

　　em是相对于父节点的font-size计算　　

<html>

    <head>

        <style>

            html{

                 font-size: 625%

            }

            .child{

                 height: 1rem;

                 width: 1rem;

            }

        </style>

    </head>

    <body>

　　　　<!-- rem是相对于根节点的font-size计算 -->

        <div class="child">此处的1rem = 100px</div>

　　　　<!-- em是相对于父节点的font-size计算 -->

        <div style="font-size:10px;"><!-- 父元素的字体大小是10px-->

            <div style="height:1em;width:1em;"></div><!-- 所以子元素的em是1em=10px；-->

        </div>

    </body>

</html>

（五）、<meta name="viewport">的含义　　　

<!-- html头部一般会加这么一行代码 -->

<html>

    <head>

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

    </head>

</html>

　　那么，它有什么作用呢？？

　　viewport用于设置移动端自适应——　　

　　但如果是浏览流动布局的网页那情况会非常糟糕，设想一个宽 度为30%的侧边栏对于320px手机屏幕而言也就96px，只能容纳8个12px的汉字，可阅读性非常差。

　　为了让手机也能获得良好的网页浏览体验，Apple找到了一个办法：在移动版(iOS)的Safari中定义了viewport meta标签①，它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器

width  设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale  设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale  允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
 height  设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable  是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
 
 
 
 
 
 
（六）、根据屏幕宽度等比压缩网页
 //根据屏幕计算设计rem的标准中

 var documentWidth = document.documentElement.offsetWidth;

 if(documentWidth > 1268 ){

    document.documentElement.style.fontSize = documentWidth/166 + "px";

 }

　　使用上面的代码，即可根据屏幕宽度等比压缩网页

　　但有2个前提：

　　　　1. css代码涉及大小的，统一使用rem进行设置；

　　　　2. html头部不能使用：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

　　　　同理：当不需要等比压缩页面时，记得把这行代码加上去，否则等比压缩一直存在。。。

　　原理： 
　　　　是根据屏宽动态的设置根节点的font-size，以此进行rem的初始值设置。实现对不同屏幕宽度的适配。
 

三、结语

使用rem的原理，62.5%，根据屏幕宽度等比压缩网页的更多相关文章

  1. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  2. rem布局原理深度理解（以及em&sol;vw&sol;vh）

    一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...

  3. rem自适应原理

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  4. 解决华为手机用rem单位，内容超出屏幕宽度问题

    在H5手机页面上,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏 ...

  5. flexible&period;js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

  6. rem布局原理

    昨天去面试,面试官竟然说他们用媒体查询针对不同的屏幕宽度做了9个不同的rem布局,呵呵... eg: html{font-size:20px;} div{width:16rem;height:100p ...

  7. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  8. 【浅谈html5 响应式布局之自动适应屏幕宽度】

    允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=”viewport” content=”w ...

  9. 移动端 css实现自适应正圆 &lpar; 宽高随着手机屏幕宽度自适应 &rpar;

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

随机推荐

  1. UITabBarButton 点击失效问题

    开发过程: 在创建一个UIWindow时,直接在window上添加手势动作. 开发代码: UITapGestureRecognizer *tapRecognizer=[[UITapGestureRec ...

  2. CSS控制print打印样式

    来源:http://blog.csdn.net/pangni/article/details/6224533 一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:   用于屏幕显 ...

  3. IOS&lowbar;OC&lowbar;百度地图与社交分享

    前奏. 知识点介绍 一. 导航和画线 地图画线 (理解) 二. 百度地图 集成百度地图 (掌握) POI检索 (掌握) 三. 社交分享 系统自带分享 (了解) 友盟分享 (掌握) SSO授权 (理解) ...

  4. PDF转WORD工具 Solid Converter PDF v9&period;1&period;6744

    Solid Converter PDF中文破解版(pdf转换成word转换器)是一款功能强大的PDF格式转换软件.Solid Converter PDF允许用户将PDF转换为Word(PDF to W ...

  5. poj2226（最小点覆盖）

    传送门:Muddy Fields 题意:一个由r行c列方格组成的田地,里面有若干个方格充满泥泞,其余方格都是草.要用长度不限,宽度为1的长木板来覆盖这些泥方格,但不能覆盖草地.最少要用多少个长木板. ...

  6. 阿里巴巴图标库iconfont上传svg后，显示不了图片

    AI里面选中图形,点对象-路径-轮廓化描边

  7. 接入天猫精灵auth2授权页面https发送ajax请求

    已存在一个应用A,采用的是http交互, 在接入天猫精灵时,要求请求类型是https,所以在应用服务前加了个nginx转发https请求.在绑定授权页面,会发送ajax请求验证用户名和密码,采用htt ...

  8. cf1000C Covered Points Count &lpar;差分&plus;map&rpar;

    考虑如果数字范围没有这么大的话,直接做一个差分数组就可以了 但现在变大了 所以要用一个map来维护 #include<bits/stdc++.h> #define pa pair<i ...

  9. 雷林鹏分享：C&num; 循环

    C# 循环 有的时候,可能需要多次执行同一块代码.一般情况下,语句是顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推. 编程语言提供了允许更为复杂的执行路径的多种控制结构. 循环语句允 ...

  10. 数据仓库专题18-数据建模语言IDEF（转载）

    1引言 IDEF的含义是集成计算机辅助制造(Integrated Computer-AidedManufacturing,ICAM)DEFinition.最初的IDEF方法是在美国空军ICAM项目建立 ...

相关文章