首页 > 网页制作 > css教程 > 正文

rem布局原理解析_CSS布局实例_CSS_网页制作

2018-10-10 20:26:45

移动端的屏幕大小各异,尤其是安卓机,千奇百怪,各种尺寸的机型都有,而且有1倍屏,2倍屏,3倍屏之分,作为精益求精的前端,我们希望找到一种完美适配各种机型的方案。rem是现在主流的移动端自适应布局方案,本文主要介绍了rem布局的原理和通用方案

原理

首先说一下,我们想要达到的自适应效果是什么。很简单:元素、字体大小能随着屏幕大小(一般相对于宽度来说)变化而变化,在大一点的屏幕上,尺寸大一些;在小一点的屏幕上,尺寸小一些;尺寸的大小和屏幕大小成正比。

最简单最直接的方案就是直接用百分比设置元素的尺寸。我们用百分比设置元素大小可以实现元素尺寸的自适应,但是无法实现字体大小的自适应,而且尺寸转化为百分比计算很麻烦,还有就是元素尺寸的高很难相对屏幕宽度设置百分比。百分比适用于某种具体场景,不是通用解决方案。

其实我们需要的是一个和屏幕宽度正相关的单位,而且这个单位要和px很容易互相转化。这样我们就可以使用这种单位进行元素尺寸和字体大小的设置。那么css中存在这种单位吗?答案是:不存在的。。。不过不要灰心,我们可以借助rem来实现这种我们需要的单位。

rem是一个相对单位,1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小,就可以改变rem所代表的大小。这样我们就有了一个可控的统一参考系。我们现在有两个目标:

  • rem单位所代表的尺寸大小和屏幕宽度成正比,也就是设置html元素的font-size和屏幕宽度成正比
  • rem单位和px单位很容易进行换算,方便我们按照标注稿写css

这里有一个前提,无论是设置html的font-size和屏幕宽度成正比,还是换算单位,我们都是以我们的标注稿为参考的。移动端的标注稿一般是640px(iphone5)或者750px(iphone6/7/8),现在750px用的比较多一些,我们假设标注稿是750px的。这里的750px是指设备的实际尺寸,也是UI标注稿的实际尺寸。而我们编码写的px是指css尺寸,是设备无关的尺寸,css尺寸和屏幕实际尺寸不是1比1的映射关系,而是取决于屏幕的像素密度。比如iphoneX是3倍屏,iphone8是2倍屏,但是两个的屏幕css尺寸都是375px。而实际的设备尺寸,iphonex是1125px,iphone8是750px,我们编码过程中只需要设置css尺寸,设备会自动帮我们映射实际的尺寸。我们按照标注稿写完页面之后,页面应该是可以在其他所有尺寸设备上正常自适应地显示的。

rem单位所代表的尺寸大小和屏幕宽度成正比

首先,设置rem单位所代表的尺寸大小和屏幕宽度成正比,有3中方案,先不必纠结其中的数值:

媒体查询, 设定每种屏幕对应的font-size

@media screen and (min-width:240px) {    html, body, button, input, select, textarea {        font-size:9px;    }}@media screen and (min-width:320px) { html, body, button, input, select, textarea {  font-size:12px; }}// 红米Note2@media screen and (min-width:360px) { html, body, button, input, select, textarea {  font-size:13.5px; }}@media screen and (min-width:375px) { html, body, button, input, select, textarea {  font-size:14.0625px; }}

js设置html的font-size大小

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

使用vw设置,vw也是一个相对单位,100vw等于屏幕宽度

html{    font-size: 10vw;}

这3种方式,都可以设置html的font-size和屏幕宽度成正比。这3种的单位是css尺寸,无论第一种方法的min-width还是第二种document.documentElement.clientWidth都是相对于设备的css尺寸而言,在iphonex和iphone8得到的结果都是375px。

第一种,需要设置需要每种屏幕都设置对应的font-size,这些font-size都是根据比例算出来的,比较繁琐,而且还有可能漏掉某些屏幕尺寸,不推荐。第二种用js设置,比较方便,现在大部分网站采用这种方式。第三种通过css的vw来设置,也很方便,而且不用写css,但是兼容性还不是特别好。综合推荐使用第二种。

单位换算

现在我们要使用rem设置元素尺寸和字体大小。有两种思路:

设置特殊的html的font-size,使rem和标注稿上px容易换算,比如把我们的html的font-size设置成1px,这样1rem就等于1px,因为我们标注稿750px,是基于二倍屏的,1个css单位等于2个实际单位,所以我们的font-size设置为0.5px,这样我们设置尺寸时,rem和标注稿的px,就是1比1映射的。当然这里所有的大小都是相对于标注稿尺寸来说的,如果是其他屏幕的尺寸,html的font-size肯定要相应的变大或者变小,通过第二种js方法可以实现:

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

通过css预编译或者webpack插件,实时计算 比如,我们将html根元素设置为16px,标注稿上有一个div元素宽度为100px,我们在scss中可以这样写

$rem: 32px;div{ width: 100/$rem;}

webpack的插件也是基于这样的计算原理,比如px2rem

module.exports = {  // ...  module: {    rules: [{      test: //.css$/,      use: [{        loader: 'style-loader'      }, {        loader: 'css-loader'      }, {        loader: 'px2rem-loader',        // options here        options: {          remUnit: 32,          remPrecision: 8        }      }]    }]  }}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 相关标签:css教程
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • 曝网友假装外国人写投诉信 ofo秒退押金并回函致歉
  • 苹果市值缩水逾2000亿美元 遭多家投行下调目标价
  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程