什么是响应式设计？如何实现？

概念: 响应式网站设计(Responsive Web Design) ，是一种网络页面布局设计，页面的设计与开发与用户行为以及设备环境(系统，终端，分辨率，屏幕定向)进行相应的响应与调整。类似一句名言：“content is like water”

响应式设计的特点:

同时适配PC + 平板 + 手机等
标签导航在接近手持终端设备时改变为经典的抽屉式导航
网站的布局会根据视口来调整模块的大小和位置

如何实现

响应式网站的设计原理就是依据媒体查询的功能，监测不同的屏幕尺寸去做响应的处理，为了适配一些设备，在开发页面的时候，就必须在 mate 标签中添加响应的属性，类似:

<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:是用户的可以缩放的操作

那么除了媒体查询是否还有其他方式可以实现响应式设计呢？

当然有，如:

媒体查询
百分比(%)
vh/vw
rem/em

如何使用？

媒体查询

就类似于if一样，当屏幕宽度....设置相应的样式，当屏幕高度.... 设置相应的样式

@media screen (min-width: 375px) and (max-width: 600px) {body {font-size: 18px;}
}

这句话就表示，当屏幕宽度在 375px~600px之间时 body中的字体大小就为 18px

百分比

这里其实就与css中的单位扯上关系了，有人就会很奇怪，百分比是如何实现响应式布局呢？

你可以这样想，将整个屏幕的宽度视作100%宽度，高度为100%高度，那么其内容中的盒子们，就会可以相对于这个值去设置相应的百分比宽度、高度，而这些盒子内部的元素又可以相对于盒子的百分比宽高去设置相应的百分比大小了，这样当我们屏幕的尺寸发生变化的时候，内容就会自动适应。

vw/vh

其实vw/vh与上面讲到的百分比是差不多的，主要区别就在于 vw/vh 永远是相对于视口的，而百分比是相对于父级元素的

rem

这个的话主要用于定义字体的响应式，但是也可以用于大件的元素，原理就是，事先定义好一组rem的大小，之后就可以相对于定义好的一个rem去适配了，详细可以去查看有关单位相关的文案

综上而言， 其实对于响应式布局，刨开来看，就是提前写好两份样式，在进行监测终端的尺寸，进行不同的展示方案，不难发现，这种方式其实实现起来是比较麻烦的，对于工作量本身就大的网页来说，同时在一个项目中去书写两份样式，对某些元素的展示与影藏，是非常损耗性能的，工作量和重新构建一个终端的页面来说，工作量与可维护性，都差不多，相反后者可持续发展性还更优秀点。

什么是响应式设计？如何实现？相关推荐

一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
基于物理尺寸的响应式设计(转)
两种Queries之间的细微区别比较如下两个media-query声明: @media (min-resolution: 341dpi) and (min-width: 767px) > ...
为什么要学习响应式设计
编者按:以下是图灵即将出版的新书<响应式Web设计:HTML5和CSS3实战>的封底文字.相信它能解答一些读者的疑问. 随着iPad mini的发布,又一个新的屏幕尺寸诞生了.用不着全面统 ...
设计师不应该错过的响应式设计框架（含优缺点分析）
Ethan Marcotte称响应式设计是基于网格建立一个网站.Marcotte定义这项技术后,响应式设计框架开始出现,主要是css和JavaScript的结合.许多框架都是开源的,可以免费下载和快速 ...
web设计经验一提升移动设备响应式设计的8个建议
今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议一.直观性和易用性在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...
媒体查询响应式设计
一.媒体查询 <1>作用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@m ...
响应式设计的十个基本技巧
为什么80%的码农都做不了架构师?>>> Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也 ...
8个实用的响应式设计框架
2019独角兽企业重金招聘Python工程师标准>>> 响应式Web设计的运用越来越更加广泛.因此,做为一名Web开发人员和前端设计师,我们有必要了解更多的有关于响应式设计的工具和资 ...
转自CSDNattilax的专栏：自适应网页设计跟响应式设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 ...
Windows10 UWP开发 - 响应式设计
Windows10 UWP开发 - 响应式设计原文:Windows10 UWP开发 - 响应式设计 Windows10 UWP开发 - 响应式设计本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽 ...

什么是响应式设计？如何实现？

如何实现

什么是响应式设计？如何实现？相关推荐

最新文章

热门文章