每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
设置 页面 布局 大小 每日 屏幕 变化 rem
2023-09-11 14:15:13 时间
昨天刷题的时候遇到这个填空,初看代码,并不太懂这段代码的含义,通过调试和查阅资料,发现这段代码作用可大了,可以让网页适配移动端,设置页面文字大小随屏幕大小变化而变化。
什么是rem❓
rem是相对单位,是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。(除了IE8及更早版本外,所有浏览器均已支持rem)
📄问题分析
首先我们要知道设置页面文字大小随屏幕大小变化而变化需要用到什么单位,没错就是上面所说的rem这个相对单位,设置页面文字大小随屏幕大小变化而变化,这句话说白了就是实现响应式的操作,除了文字,网页布局也经常涉及到响应式的布局,让网页做到兼容不同的设备或者分辨率,在不同的应用场景,实现一样的用户体验。
📄关于响应式网页设计
响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
代码如下
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//在以下横线中填写,如何宽度大于720那就按720执行,否则按实际宽
var clientWidth = docEl.clientWidth;
// var clientWidth = ______(10)________;
var clientWidth = 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);
相关文章
- Windows Store App 全球化 设置指定页面的语言
- AAuto如何设置combobox
- 如何设置页面自动刷新第二篇??
- 如何设置页面自动刷新第一篇?? servlet setHeader("refresh","2")
- Android手机系统设置页面跳转
- 【secureCRT】永久设置全局默认编码格式为UTF8,解决中文乱码
- C# 中winform的一些属性设置
- uniapp设置tabBar跳转后,其他页面跳转到主页、主页参数、接参(整理)
- 动态设置elementui 的el-tree的层级只显示2个层级
- 【Auto.js】[系统Intent]_系统设置页面的相关intent跳转
- 【CSS】课程网站头部制作 ① ( 头部区域测量 | 头部盒子标签结构 | 整体页面背景颜色设置 | LOGO 盒子设置 | 切片工具切图 | LOGO 相关 HTML 结构及 CSS 样式编写 )
- 【Android Gradle 插件】自定义 Gradle 任务 ⑭ ( TaskOutputs#upToDateWhen 设置重复任务是否执行 | Gradle 预置任务 )
- myeclipse中java文件头注释格式设置
- ES设置字段搜索权重——Query-Time Boosting
- 华为交换机console口如何设置密码
- selenium python 设置窗口 全屏 自定义窗口大小
- Android Studio设置HTTP代理(可用)