8、什么是响应式设计?响应式设计的基本原理是什么?如何做?
简介
我这么理解:响应式布局就是一个网站能够兼容多个设备,可以根据屏幕的大小自动调整页面的展示方式以及布局,我们不用为每一个设备做一个特定的版本。响应式网站的特点:
- 同时适配PC+平板+手机等
- 网站的布局会根据视口来调整模块的大小和高度
- 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理来设置差异化的css样式
一、是什么?
响应式网站设计(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,同时使用媒体查询限制元素的尺寸和内容变更范围
- 使用相对单位使得内容自适应调节
- 选择断点,针对不同断点实现不同布局和内容展示
三、总结
响应式布局优点可以看到:
- 面对不同分辨率设备灵活性强
- 能够快捷解决多设备显示适应问题
缺点:
- 仅适用布局、信息、框架并不复杂的部门类型网站
- 兼容各种设备工作量大,效率低下
- 代码累赘,会出现隐藏无用的元素,加载时间加长
- 其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
- 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
8、什么是响应式设计?响应式设计的基本原理是什么?如何做?相关推荐
- 响应式网页的布局设计
值得收藏的14款响应式前端开发框架 作为今年大热的设计趋势,响应式已然是设计师的标配技能.今天阿里的同学从响应式设计的布局类型.布局实现两方面深入讲解,有哪些实现布局的方式,该采用何种方式,都有相当专 ...
- 显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- 自适应网页设计/响应式Web设计 (Responsive Web Design)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- Web前端--HTML+CSS+JavaScript响应式网络科技网页设计
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- 【我的前端】网站开发:设计响应式网站的八大因素
网站开发:设计响应式网站的八大因素 在当今世界,网站的开发和设计每天都在急剧增加和发展,因此,由于竞争激烈,开发人员需要开发响应式网站.开发和设计响应式网站需要访问快速的互联网.这意味着开发人员需要有 ...
- 原生前端实现响应式个人简历网站设计(附源码)
目录 网站站点 所用技术 实现功能 视频展示 源码 网站站点 胜烨的个人网站 所用技术 HTML css JavaScript 实现功能 响应式界面设计 捕捉用户操作 明暗模式 服务器部署 视频展示 ...
- 前端设计 响应式设计_响应设计简介
前端设计 响应式设计 "Responsive Design" as a buzzword has reached peak popularity: we now have book ...
- 【源码分享】响应式风景旅游网页设计-HTML+CSS+JavaScript
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- Web前端---响应式室内家具网页设计(HTML+CSS+JS)
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
最新文章
- Serializer反序列化使用之验证和保存
- Spring Cloud Alibaba基础教程:Sentinel使用Nacos存储规则
- 【java基础知识】JDK环境下载安装过程(windows环境/Linux环境)+IDEA配置
- vue可以直接进行运算么_Vue实现手机计算器
- 服務端的EIT造形+Socket代碼
- python和c先学哪个-先学C语言还是Python?资深程序员往往是这样建议的!
- Django项目实践2 - Django模板(网页多语种支持/国际化)
- coco 数据集_PyTorch版YOLOv4更新了,适用于自定义数据集
- 解决mapper.xml不在resource的时出现的错误nvalid bound statement (not found): com.dxl.system.mapper
- 神思第二代身份证验证系统
- esp8266 从硬件开发到app制作的简单示例
- 6678与FPGA PCIE调试
- SSO单点登录Java实现实例
- 供水供气管道泄漏监测系统原理
- oceancolor数据批量下载
- 知乎网站胡说八道,误人子弟!
- amigo幸运字符什么意思_超不清视频播放器-用Python将视频转成字符
- 开机时小键盘灯不亮的解决方案
- 如何解决微信端不能直接跳转浏览器
- 连接远程计算机提示:“这可能是由于CredSSP加密数据库修正” 问题