每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)

简介: 每日学一点加强技术水平,夯实基础。 阅读这篇文章,一起学习rem布局吧。

前言

昨天刷题的时候遇到这个填空,初看代码,并不太懂这段代码的含义,通过调试和查阅资料,发现这段代码作用可大了,可以让网页适配移动端,设置页面文字大小随屏幕大小变化而变化。

0cbfe65a2fe4802ee28877b97758dcb.jpg

什么是rem❓

rem是相对单位,是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。(除了IE8及更早版本外,所有浏览器均已支持rem

问题分析

首先我们要知道设置页面文字大小随屏幕大小变化而变化需要用到什么单位,没错就是上面所说的rem这个相对单位,设置页面文字大小随屏幕大小变化而变化,这句话说白了就是实现响应式的操作,除了文字,网页布局也经常涉及到响应式的布局,让网页做到兼容不同的设备或者分辨率,在不同的应用场景,实现一样的用户体验。

关于响应式网页设计

响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。


rem布局代码如下

(function (doc, win) {
vardocEl=doc.documentElement,
resizeEvt='orientationchange'inwindow?'orientationchange' : 'resize',
recalc=function () {
//在以下横线中填写,如何宽度大于720那就按720执行,否则按实际宽varclientWidth=docEl.clientWidth;
// var clientWidth = ______(10)________;varclientWidth=docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize=20* (clientWidth/320) +'px';
  };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);


目录
相关文章
|
4月前
|
前端开发
除了伪元素清除法,还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求,在实际开发中,需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
|
10月前
|
前端开发 容器
如何实现一个两栏布局,右侧自适应?三栏布局中间自适应?
要实现一个两栏布局,右侧自适应的效果,可以使用 CSS 的 Flexbox 或 Grid 布局来实现。以下是使用 Flexbox 实现的示例:
98 1
|
10月前
|
Windows
电脑屏幕亮度无法调整且字体大小变化的解决
电脑屏幕亮度无法调整且字体大小变化的解决
400 1
一款特别好用的屏幕颜色拾取工具Colors
一款特别好用的屏幕颜色拾取工具Colors
136 0
|
UED 容器
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
103 0
|
前端开发 容器
两栏布局的实现方式
两栏布局的实现方式
|
编解码 前端开发
前端设置页面字体尺寸跟随屏幕大小而进行变化
前端设置页面字体尺寸跟随屏幕大小而进行变化
745 0
前端设置页面字体尺寸跟随屏幕大小而进行变化
|
iOS开发
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
169 0
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(3,此节不全)
通过本章认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法。
119 0