重温"什么是响应式网页设计？响应式布局的实现原理"

Nekron 发布于2019-08-29 12:28 / 369人阅读

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

概念

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。

背景

PC互联网加速向移动端迁移：2012年12月底我国网民规模达到5.64亿，互联网普及率为42.1%，手机用户占网民总数的74.5%。预计到2015年，移动互联网的数据流量将超越PC端的流量。

移动端入口：当用户希望通过手机来完成PC页的操作时，常见的是商家的运营微博，期文案足够吸引用户点击链接参加活动，如果该活动页没做响应式处理：页面体积大、请求多、体验差、兼容性差，层层阻碍最终导致用户放弃参加。

优势开发成本低，门槛低

Native APP：Objective-C or Java – 学习成本高
Hybrid APP： 外壳+Web APP，需安装。
响应式Web APP：HTML5+JS+CSS – 门槛低，极易上手，迭代快

跨平台和终端且不需要分配子域

虽然可通过监测用户UA来判断用户终端后做跳转，但它还是分配了多个域，而响应式无需监测用户UA没有域的切换，只需根据终端类型来适配不同的功能模块与表现样式，它是跨平台和终端的，1页面适配多终端。

PC – http://qzone.com
Mobile – http://m.qzone.com
响应式：PC & Mobile – http://qzone.com 无需跳转

本地存储

Web App可以利用本地存储的特性将重要和重复的数据保存在本地，避免页面的重复刷新，减少重要信息在传输过程中被泄露，增量传输修改内容。

无需安装成本，迭代更新容易

responsive-web-design

更灵活、更方便的APP使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一

实施

首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；
一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：

响应式布局
响应式内容（图片、多媒体）

响应式布局

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？

那么我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不同尺寸下的位置：

响应式布局

那么我们要怎么做？

Meta标签定义

使用 viewport meta 标签在手机浏览器上控制布局

通过快捷方式打开时全屏显示

隐藏状态栏

iPhone会将看起来像电话号码的数字添加电话连接，应当关闭

使用 Media Queries 适配对应样式

常用于布局的CSS Media Queries有以下几种

设备类型(media type):

all所有设备
screen 电脑显示器
print打印用纸或打印预览视图
handheld便携设备
tv电视机类型的设备
speech语意和音频盒成器
braille盲人用点字法触觉回馈设备
embossed盲文打印机
projection各种投影设备
tty使用固定密度字母栅格的媒介，比如电传打字机和终端

设备特性(media feature):

width浏览器宽度
height浏览器高度
device-width设备屏幕分辨率的宽度值
device-height设备屏幕分辨率的高度值
orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape
aspect-ratio比例值，浏览器的纵横比
device-aspect-ratio比例值，屏幕的纵横比

专线服务云服务器响应式布局 asp如何响应式布局 html响应式导布局响应式设计

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

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

重温&quot;什么是响应式网页设计？响应式布局的实现原理&quot;

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

Joyven 2019-08-01 16:43 评论0 收藏0
前端面试资源整理（一）

摘要：是上一次加载资源时，服务器返回的，是对该资源的一种唯一标识，只要资源有变化，就会重新生成。同源限制如果非同源以下三种行为将受到限制和无法读取。Js相关执行环节和作用域执行环节定义了函数或者变量可以访问的其它数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，在环境中定义的所有变量和函数都保存在这个变量中，并且是我们无法访问。每个函数都有自己的执行环境，当执行流进入一个函数的时...

phoenixsky 2019-08-30 14:11 评论0 收藏0
前端面试资源整理（一）

摘要：是上一次加载资源时，服务器返回的，是对该资源的一种唯一标识，只要资源有变化，就会重新生成。同源限制如果非同源以下三种行为将受到限制和无法读取。Js相关执行环节和作用域执行环节定义了函数或者变量可以访问的其它数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，在环境中定义的所有变量和函数都保存在这个变量中，并且是我们无法访问。每个函数都有自己的执行环境，当执行流进入一个函数的时...

jzzlee 2019-08-22 15:32 评论0 收藏0
前端面试资源整理（一）

摘要：是上一次加载资源时，服务器返回的，是对该资源的一种唯一标识，只要资源有变化，就会重新生成。同源限制如果非同源以下三种行为将受到限制和无法读取。Js相关执行环节和作用域执行环节定义了函数或者变量可以访问的其它数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，在环境中定义的所有变量和函数都保存在这个变量中，并且是我们无法访问。每个函数都有自己的执行环境，当执行流进入一个函数的时...

邹立鹏 2019-08-05 18:04 评论0 收藏0
Vue3中reactive与ref函数使用场景

　　我们知道在 Vue3 中有两个非常常用的响应式 API：reactive 和 ref。这样就可以变成我们想要追踪的数据变成响应式。　　知道吗？在使用时一直被告知 ref 用于创建基础类型的响应式，也可以创建引用类型的响应式。而对于引用类型，底层也是转换为 reactive 来进行响应式处理。那既然这样为撒还需要 reactive ，全部使用 ref 不就行了吗？　　虽然 ref 创建的响应式数...

3403771864 2022-10-16 15:30 评论0 收藏0