考核内容:web在不同设备下的度量使用
题发散度: ★★
试题难度: ★★
解题思路:
在做上面的题目时要注意
1rem、1em、1vh、1px各自代表的含义?
- rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。
- em 子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
<div> boxoutside 0 div><div class="box"><div class="box1">box 1div><div class="box2">box 2div><div class="box3">box 3div>div><style>html{font-size: 50px}.box{font-size: 12px}.box1{font-size: 1em}.box2{font-size: 2em}.box3{font-size: 3em}style>
- vw/vh
全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于 屏幕宽度和高度的 1%,不过,处理宽度的时候%单位更合适,处理高度的 话 vh 单位更好。
<div class="box"> <img src="pic.jpg" alt="100*80"> <img src="pic.jpg" class="s1" alt="100*80"> <img src="pic.jpg" class="s2" alt="100*80"> <img src="pic.jpg" class="s3" alt="100*80">div><style> *{margin: 0;padding: 0} .box{width: 300px;height: 300px;background: pink} .s1{height: 10vw} .s2{width: 10vh} .s3{width: 60vw;height: 50vh}style>
- px像素(Pixel)
相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
比如:脑的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
<div class="box"> <div class="box1">box 1div> <div class="box2">box 2div>div><style> .box{width: 300px;background: pink} .box1{width: 100px;background: blue} .box2{width: 200px;background: green}style>
要注意的是
rpx单位是微信小程序中css的尺寸单位,
rpx可以根据屏幕宽度进行自适应。
答案:
B. em子元素字体大小的em是相对于根元素HTML字体大小
相关推荐:
前端测试题:关于javascirpt中,typeof判断数据类型中不可能出现的是
前端测试题:var str=’shuke‘ 字符串值(shuke)转为变量名的方法正确的是?
前端测试题:有关于JS 中的主要错误,表述错误的是?
前端测试题:有关于双向绑定功能在ES6中实现的数据代理(数据劫持),表述有错误的是?
前端测试题:以下浏览器对js显示数据方法,表述错误的是?
前端测试题:关于JAVASCRIPT中以下操作输出的是TRUE的是?
前端测试题: 关于this的用法下面说法正确的是?
前端测试题:有关于JAVASCRIPT闭包说明正确的是?
前端测试题:如何理解JS中对数据的深浅拷贝?
前端测试题: 关于定义常量的关键字const,定义一个Object对象,再对属性的值进行修改,下列说法正确的?
前端测试题:ES6中想要获取Map实例对象的成员数,利用的属性是?
前端测试题:module模块中的注意事项,下列说法错误的?
前端测试题:module模块中,对下列语句的描述,错误的是?
前端测试题:关于ES6的module模块,下列说法错误的是?
前端测试题:在Generator函数中," yield* "语句的作用是?
前端测试题:Generator函数的yield关键字的作用是?
前端测试题:关于新特性Generator函数的描述,错误的是?
前端测试题:关于Iterator遍历器的说法,错误的是?
前端测试题: 下列数据结构中,不能被for...of遍历的是?
前端测试题:在类的继承中,关于super的说法错误的是?
前端测试题:下面关于类class的描述,错误的是?
前端测试题:关于Promise对象的状态,下列说法错误的是?
前端测试题:关于WeakMap结构,下列说法错误的是?
前端测试题:下列Map结构的键名数据类型,描述错误的是?
前端测试题:关于Map结构的介绍,下面说法错误的是?
前端测试题: 关于WeakSet结构,说法错误的是?
前端测试题: 关于set结构,下面说法错误的是?
前端测试题: 关于for...of的简述,说法错误的是?
前端测试题: 关于Proxy代理,下面说法错误的是?
前端测试题: 下面Symbol运算结果,结果为true的是?
前端测试题: 关于Symbol,错误的说法是?
前端测试题: 关于箭头函数的描述,错误的是?
前端测试题: 数组扩展的fill( )函数,[1,2,3].fill(4)的结果是?
前端测试题: 数组的扩展中,不属于用于数组遍历的函数的是?
企业面试题: 关于对象的Object.is函数,错误的是?
关于对象的扩展,错误的是?
企业面试题: 对前端工程师这个职位是怎么样理解的
企业面试题: 为什么要初始化CSS样式
企业面试题:CSS中 link 和@import 的区别是什么
企业面试题:position的absolute与fixed共同点与不同点
企业面试题:用css实现div在不同分辨率屏幕上下左右居中
企业面试题: 解释css sprites 如何使用?
企业面试题: 1&&2,1||2代码的输出值是?
企业面试题: cookies,sessionStorage 和 localStorage 的区别?
企业面试题: 关于JS在使用过程中 0.1+0.2!=0.3 的问题
企业面试题:js编写数组去重方法
企业面试题: 实现一个事件委托(事件代理)
企业面试题:如何显示/隐藏一个DOM元素
企业面试题:如何实现浏览器内多个标签页之间的通信
企业面试题:去除字符串空格
企业面试题:关于js闭包
企业面试题:如何实现实现1+2+......+n
企业面试题:变量作用域