关于响应式设计的一些关键点

golden_hamster 发布于2019-08-29 14:17 / 2884人阅读

摘要：这里使用到的最多的中的属性，即媒体查询响应式设计实践原则渐进增强渐进增强英语是网页设计的一种策略，强调可访问性，语义标记，外部样式表和脚本技术。

1、响应式设计关键点在于：

媒体查询、流动网格、弹性图片，而不是flex布局或者是自适应布局

响应式和自适应的最直观的区别是：
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，直观地来看就是盒子会根据屏幕分辨率的大小进行伸缩变换。
所以，就是PC端与手机端浏览的时候就是一个设计的板式，这样子当然是体验比较差的。

响应式设计就解决了这个问题，即不同大小的设备，不同类型的设备显现不同的网页，具体的区别在于不同的大小或设备类型的设备，加载不同的css。
这里使用到的最多的css3中的@media属性，即媒体查询

2、响应式设计实践原则

progressive enhancement（渐进增强）

渐进增强(英语：Progressive enhancement)是网页设计的一种策略，强调可访问性，语义HTML标记，外部样式表和脚本技术。 渐进增强使用Web技术以分层的方式，允许所有人访问网页的基本内容和功能，使用任何浏览器或互联网连接，同时还给更先进的浏览器软件或更大的带宽提供了这些页面的一个增强版本。

graceful degradation (优雅降级)

优雅降级，用一句话来说就是：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

3、设置断点

应用css3中的媒体查询属性，常见的断点设置如下：

（小屏幕）----（中屏幕）----（大屏幕）
-- 0~480 ------- 481~800------801~1400

小屏幕对应的是我们最常用的移动设备，即手机。中屏幕一般是平板的视觉效果，而大屏幕则是我们平时的笔记本或者是大屏幕了。

4、一个原则：先针对受众多的进行设计

我们在进行设计的时候，一个原则就是，那一种设备的用户比较多，就先针对它来设计。设计完再考虑其他的使用情况。抓住主要的目标用户。

5、相关单位

vw、vh、em、rem

vw 相对于视窗的宽度：视窗宽度是100vw
vh 相对于视窗的高度：视窗宽度是100vh
这里重点要理解视窗的定义，避免掉坑，譬如，当我们手机输入文本，弹出键盘的时候，vh就缩小来。这时候vh并不近似等于屏幕大小，而是除来手机键盘之外的部分。

并不是所有浏览器都会兼容rem，为了代码的健壮性，在css中写两行：

font-size: 16px;
font-size: 1rem;

6、常见的响应式框架

以下列出一些对响应式设计做出相应处理的前端框架，我们可以根据使用习惯与实际情况进行相应的选择：

bootstrap

foundation

semantic UI

Pure.css（轻量级）

GPU云服务器云服务器响应式设计响应式关于ai设计的比赛关于网站设计的网站

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

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

响应式设计个人的一些总结

摘要：所以一个网，甚至是响应式设计，在两个平台上都会损害您整体的。三响应式与如果把网站作为一个单独的网站，如果网站的内容与桌面版的内容相对缺少，导致用户回到桌面端的网站，会记录这种选择，使搜索排名降低，国内百度就不知道会怎样。一、为什么需要响应式设计（responsible web design） 1. 响应式发展背景 1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以...

LeoHsiun 2019-08-01 15:32 评论0 收藏0
关于响应式web设计

摘要：手机网站电脑网站平版网站响应式网站在没有足够经费跟精力的做一个手机网站的情况下，响应式网站是个不错的选择。手机网站+电脑网站+平版网站 = 响应式网站在没有足够经费跟精力的做一个手机网站的情况下，响应式网站是个不错的选择。它有以下的优点：减少工作量（网站代码只要一份，只需要做js方面的改动及可以了）节省时间（每个设备都得到考虑，搜索也友好）首先是[][1]的设置：大多数手...

morgan 2019-08-29 13:55 评论0 收藏0
关于响应式web设计

摘要：手机网站电脑网站平版网站响应式网站在没有足够经费跟精力的做一个手机网站的情况下，响应式网站是个不错的选择。手机网站+电脑网站+平版网站 = 响应式网站在没有足够经费跟精力的做一个手机网站的情况下，响应式网站是个不错的选择。它有以下的优点：减少工作量（网站代码只要一份，只需要做js方面的改动及可以了）节省时间（每个设备都得到考虑，搜索也友好）首先是[][1]的设置：大多数手...

bbbbbb 2019-08-02 15:58 评论0 收藏0
重温"什么是响应式网页设计？响应式布局的实现原理"

摘要：概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年，移动互联网的数据流量将超越端的流量。概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是...

Nekron 2019-08-29 12:28 评论0 收藏0