响应式设计简介

waltr 发布于2019-08-05 11:44 / 1190人阅读

摘要：响应式设计，就是让同一个页面在不同的分辨率下都要呈现出最佳效果，提升用户体验。响应式设计步骤通过上面介绍，我们了解到响应式设计的第一步需要在页面中添加如下代码然后就是设置各个分辨率下的样式了。不同范围的分界点叫做响应式布局的断点。

响应式设计，就是让同一个页面在不同的分辨率下都要呈现出最佳效果，提升用户体验。
很容易想到，设计思路就是针对不同的分辨率，为页面设置不同的样式，下面我们就来看看如何实现。不过在此之前，还需要先了解下面两个东西。

viewport

viewport 就是屏幕上用来显示页面内容的那部分区域。默认情况下，移动设备上的viewport是大于屏幕宽度的，这是为了确保能够展示那些针对传统PC端开发的网页。大部分移动设备的默认viewport都在980px左右。这样就会造成浏览器横向的滚动条出现。有些设备为了避免滚动条出现，会自动缩小网页内容，使内容适应屏幕宽度，这样就会造成屏幕上的内容非常小，难以看清。以上两种处理方式都不是我们希望看到的，因此，需要首先将这个viewport设置为设备的宽度，设置缩放比例为1：1，代码如下：

注意：这里关于viewport的解读比较简单，详细的可以参考这篇文章。

媒体查询

媒体查询是写在CSS中的一段代码，作为其他CSS代码的容器。容器中的css代码只有在媒体查询条件的情况下才会生效。例如屏幕宽度<980px，网页正在打印时等。有2种方式可以添加媒体查询：@media规则和标签的media属性。

响应式设计步骤

通过上面介绍，我们了解到响应式设计的第一步需要在页面中添加如下代码：

然后就是设置各个分辨率下的样式了。但屏幕的分辨率种类实在太多了，我们不可能一一穷举出来，也没有必要这么做。实际上可以将分辨率划分成几个范围，然后分别设置这几个范围内的样式。不同范围的分界点叫做响应式布局的断点。
关于断点的选择，不同的前端框架都有各自的选择，但总体上都是按照手机、平板、PC几个范围来的。如bootstrap3的选择：

Extra small devices Phones (<768px)

Small devices Tablets (≥768px)

Medium devices Desktops (≥992px)

Large devices Desktops (≥1200px)

断点（breakpoint）的具体写法类似如下形式:

@media screen and (min-width:640px) { /CSS 规则/ }

idc机房托管云服务器响应式设计响应式响应式布局响应式网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56464.html

响应式设计简介

摘要：响应式设计，就是让同一个页面在不同的分辨率下都要呈现出最佳效果，提升用户体验。响应式设计步骤通过上面介绍，我们了解到响应式设计的第一步需要在页面中添加如下代码然后就是设置各个分辨率下的样式了。不同范围的分界点叫做响应式布局的断点。响应式设计，就是让同一个页面在不同的分辨率下都要呈现出最佳效果，提升用户体验。很容易想到，设计思路就是针对不同的分辨率，为页面设置不同的样式，下面我们就来看...

rainyang 2019-08-20 18:22 评论0 收藏0
关于HTML5，最牛逼的10本书！

摘要：学武如此，学习移动开发又何尝不是呢最近微信推出小程序内测，未来方向的专业人才必定水涨船高。上半部分涵盖了能使各类网站，特别是移动网站变快的基本概念。　　金庸小说中涉及到剑法98种，刀法33种，鞭法12种，棍法及枪法23种，掌法及腿法206种，无属性功法20种。学会任何一种都能让你成为称霸一方的武林高手。但是，要成为威震天下笑傲江湖的绝顶高手，等闲武学是做不到的。最明显的例子就是慕容复...

niuxiaowei111 2019-08-05 10:15 评论0 收藏0
华为官方首发Spring响应式微服务，Spring+Boot+Cloud三管齐下

摘要：今天小编就来分享一份华为刚刚首发的响应式微服务实战这份主要包含响应式微服务架构实现过程中所应具备的技术体系和工程实践，在组织结构上分如下篇。今天小编就来分享一份华为刚刚首发的Spring响应式微服务（Spring Boot 2+Spring 5+Spring Cloud实战）！这份PDF...

cangck_X 2021-10-14 09:43 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

livem 2019-08-05 12:46 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

stormgens 2019-08-01 18:25 评论0 收藏0