面试官:什么是响应式设计?响应式设计的基本原理是什么?如何做?
一、是什么
响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
描述响应式界面最著名的一句话就是“Content is like water”
大白话便是“如果将屏幕看作容器,那么内容就像水一样”
响应式网站常见特点:
同时适配PC + 平板 + 手机等
标签导航在接近手持终端设备时改变为经典的抽屉式导航
网站的布局会根据视口来调整模块的大小和位置
二、实现方式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta
声明viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
属性对应如下:
width=device-width: 是自适应手机屏幕的尺寸宽度
maximum-scale:是缩放比例的最大值
inital-scale:是缩放的初始化
user-scalable:是用户的可以缩放的操作
实现响应式布局的方式有如下:
媒体查询
百分比
vw/vh
rem
媒体查询
CSS3
中的增加了更多的媒体查询,就像if
条件表达式一样,我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表
使用@Media
查询,可以针对不同的媒体类型定义不同的样式,如:
@media screen and (max-width: 1920px) { ... }
当视口在375px - 600px之间,设置特定字体大小18px
@media screen (min-width: 375px) and (max-width: 600px) {body {font-size: 18px;}
}
通过媒体查询,可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局,比如我们为不同分辨率的屏幕,设置不同的背景图片
比如给小屏幕手机设置@2x图,为大屏幕手机设置@3x图,通过媒体查询就能很方便的实现
百分比
通过百分比单位 " % " 来实现响应式的效果
比如当浏览器的宽度或者高度发生变化时,通过百分比单位,可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果
height
、width
属性的百分比依托于父标签的宽高,但是其他盒子属性则不完全依赖父元素:
子元素的top/left和bottom/right如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度/宽度
子元素的padding如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。
子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width
border-radius不一样,如果设置border-radius为百分比,则是相对于自身的宽度
可以看到每个属性都使用百分比,会照成布局的复杂度,所以不建议使用百分比来实现响应式
vw/vh
vw
表示相对于视图窗口的宽度,vh
表示相对于视图窗口高度。任意层级元素,在使用vw
单位的情况下,1vw
都等于视图宽度的百分之一
与百分比布局很相似,在以前文章提过与%
的区别,这里就不再展开述说
rem
在以前也讲到,rem
是相对于根元素html
的font-size
属性,默认情况下浏览器字体大小为16px
,此时1rem = 16px
可以利用前面提到的媒体查询,针对不同设备分辨率改变font-size
的值,如下:
@media screen and (max-width: 414px) {html {font-size: 18px}
}@media screen and (max-width: 375px) {html {font-size: 16px}
}@media screen and (max-width: 320px) {html {font-size: 12px}
}
为了更准确监听设备可视窗口变化,我们可以在css
之前插入script
标签,内容如下:
//动态为根元素设置字体大小
function init () {// 获取屏幕宽度var width = document.documentElement.clientWidth// 设置根元素字体大小。此时为宽的10等分document.documentElement.style.fontSize = width / 10 + 'px'
}//首次加载应用,设置一次
init()
// 监听手机旋转的事件的时机,重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化,重新设置
window.addEventListener('resize', init)
无论设备可视窗口如何变化,始终设置rem
为width
的1/10,实现了百分比布局
除此之外,我们还可以利用主流UI
框架,如:element ui
、antd
提供的栅格布局实现响应式
小结
响应式设计实现通常会从以下几方面思考:
弹性盒子(包括图片、表格、视频)和媒体查询等技术
使用百分比布局创建流式布局的弹性UI,同时使用媒体查询限制元素的尺寸和内容变更范围
使用相对单位使得内容自适应调节
选择断点,针对不同断点实现不同布局和内容展示
三、总结
响应式布局优点可以看到:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
参考文献
https://baike.baidu.com/item/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1
https://juejin.cn/post/6844904082751111176
https://vue3js.cn/interview
--The End--
系列正在更新:14/20
点击下方卡片解锁更多
创作不易,星标、点赞、在看 三连支持
面试官:什么是响应式设计?响应式设计的基本原理是什么?如何做?相关推荐
- 面试后要请你吃饭_面试官:老板请吃饭,却要你结账,你会咋做?男子智答,被录用...
原创不易,转载请注明 坚持弘扬社会正能量 面试官:老板请吃饭,却要你结账,你会咋做?男子智答,被录用 出门在外打工,平时和朋友一起吃个饭很正常,,毕竟大家在同一座城市上班,这样你来我往的可以增加朋友之 ...
- 面试官一听就想发offer的自我介绍,到底是怎么做的?
好的开始决定了成功的一半,这话没有夸张.很多人在求职面试的过程中都会遇到这个问题: "请做个自我介绍." 有的人,口若悬河.妙语连珠讲3分钟:有的人,可能磕磕巴巴只讲30秒,就开始 ...
- Android:面试官死亡问答,如何优化一个网络请求?大牛多个网络优化方案帮你解决!
面试官:小萧啊,我好想你啊,你都好久没来找我面试了呀. 小萧:emmmmmmm,这不是怕被你打击吗. 面试官:ok,看来是有备而来,那么我们今天聊聊网络优化咋做吧. 小萧:我大意了,没有闪.老头子,你 ...
- 技术面试(上):面试官篇
作为一个技术团队管理者,面试是一项必不可少的工作:作为一个上班族,被面试也是必然会一而再再而三经历的事情. 不过在我的经验中,很多人(包括曾经的自己)不太会面试这件事,或者说不太重视这件事.面试官认为 ...
- 一个MySQL锁和面试官大战三十回合,我霸中霸!
我,小Y. 又来面试了,还是之前那家公司,即将和之前那个老面试官进行第二次 battle,心情还是xue微有点忐忑. 又一抹光亮闪过,面试官推门而入,我抬头望去,没错,还是那味儿. 看到面试官头上那& ...
- 【浅谈】如何做好一名初级技术面试官
对于搞技术的同学来说,平时会更多的专注于技术或业务本身 但是随着工作经历,技术能力的增加,早晚会成为团队的主力技术人员. 逐渐的老板,就会给你安排一些面试任务,有初级的有高级的,有校招有社招的. 刚好 ...
- 面试还在被红-黑树虐?看完这篇动图文章轻松反虐面试官
网上有很多红-黑树的段子,很多人都说,红-黑树只会存在于段子里,不会在面试中或者实际项目中让你实现.来看看网友都是怎么说的: 通常,如果有面试官问我红黑数这种问题. 我一般扭头就走. 不是因为,这个职 ...
- 识破面试官的套路:十个典型的面试问题剖析
明哥通过十个典型面试问题的剖析,抛砖引玉,帮你了解面试官的套路,教你如何在面试中因势利导,自如应对. 1 你有什么职业规划? 无论菜鸟还是老鸟,面试官都会问职业规划,乐此不疲,他想听到的是什么? 是你 ...
- 惨遭腾讯面试官吊打高并发系统设计,回来学习2400小时后成功复仇!
去年的金九银十,我和大多数的同行一样加入了升职涨薪的潮水,我早在2个月前就开始准备,我觉得自己在技术方面完全没有问题,于是这两个月我每天在公司摸鱼2小时,回家刷2小时,前前后后刷了几千到面试题,Lee ...
- 秋招干货|给面试官满分的自我介绍
毕业生慢慢拿到毕业证,秋招也慢慢的接近.首先要搞清楚,群面自我介绍是为了什么?我们只有一个核心诉求:让面试官记住我,并对我感兴趣.那怎么介绍才能让面试官记住我呢?小编就把秘籍拿到这里分享给童鞋们,希望 ...
最新文章
- 10大黑客专用的 Linux 操作系统,每个都很酷!
- 引燃AI社区,不用跨界也能从文本生成图像,OpenAI新模型打破自然语言与视觉次元壁...
- android Intent onNewIntent 什么时候调用
- 中国物流供应链“零的突破”!阿里路径规划算法入围运筹学“奥斯卡”
- java集合框架(Framework)的性能
- java8新特性简述
- 线性代数 —— 线性递推关系
- 高级php进修,PHP进修笔记一:PHP的数据类型与常量应用
- Java NIO框架Mina、Netty、Grizzly介绍与对比(zz)
- nginx rewrite 实现二级域名跳转
- 系统调用-文件访问 创建、打开、关闭、读、写
- 使用Excel进行线性规划
- 人工势场法(APF) —— Path Planning
- 豆瓣app签名sig
- 前端关系图谱插件_前端拓扑图插件选型对比
- Hibernate主键生成策略
- 以下产品不用再做CCC认证了,你的产品在内吗?
- 四电极体脂称解决方案——测量原理
- 计算机视频DVI接口,HDMI、DVI 电脑为什么会有这么多种视频接口?
- 云MAS - MT-提交状态码
热门文章
- 计算机在存储波形声音之前必须要进行的是,【单选题】计算机在存储波形声音之前,必须进行A. 压缩处理 B. 解压缩处理 C. 模拟化处理 D. 数字化处理...
- jolt详细使用教程
- 如何用PS使图片部分地方变为黑白?
- python单元测试框架—unittest
- Java初学者常用的基础问题及答案汇总(快收藏)
- 相信我:100% 有人被这样套路过
- css 利用径向渐变 画反向圆角:
- Silicon Lab Ember zigbee学习杂谈---zcl frame解析
- Arduino IDE搭建合宙ESP32C3开发环境(最简单) 附跑马灯代码
- 纯css3模拟龙卷风动画js特效