html5重构页面,响应式web页面重构技术关键点_蓝戒的博客

最新推荐文章于 2023-03-14 14:15:02 发布

叫我峻爷

最新推荐文章于 2023-03-14 14:15:02 发布

阅读量322

点赞数

文章标签： html5重构页面

响应式Web设计，这个概念是Ethan Marctte 在A List Apart 发表的一篇文章“Responsive Web Design”中援引响应式建筑而得名：响应式建筑(responsive architecture)，物理空间应该可以根据存在于其中的人的情况进行相应。

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

背景

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

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

优势开发成本低，门槛低

Native APP：Objective-C 或 Java – 学习成本高

Hybrid APP：外壳+Web APP，需安装。

响应式Web APP：HTML5+JS+CSS – 门槛低，极易上手，迭代快

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

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

本地存储

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

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

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

实施

首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；

一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：

响应式布局

响应式内容(图片、多媒体)

响应式布局

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

那么我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应。

总结出响应式页面的几个关键要点：

1、页面头部的meta说明，可以通过viewport meta标签去让你的html页面的的宽度能根据设备分辨率让浏览器的可视宽度来适应，也可以在这里设置页面的缩放比例等等，这样在成比例的分辨率设备下，就可以更简单地实现响应式。

2、流体布局(fluid grid)，所谓的流体布局，其实就是在你pc端实现的页面基础上，将一些元素的宽高由原来的固定多少像素(px)调整为百分比(%)或字体比例(em) (或布局方面的margin、padding、left、top等以px为单位的值)，这也是当前实现响应式布局的两种主要实现方法。

第一种用百分比(%)，就是以该元素的父容器的宽高为100%，其他元素的宽高相对于其父容器的比例，只要将具体的像素值相对于他的父容器的一个百分比折算即可。

第二种方法是用字号比例(em)去实现，其实方法是跟上面一样的，只不过我们将%换成了em，这种方法就是某元素具体的宽高(px)在当前基准字号(font-size)下折算出多少个em。

3、流体图片 (liquid image)，在我所了解的很多资料中，对图片处理这块，如果要使图片能根据分辨率来适应，而且还不失真，好像挺困难的。但其实我们不用考虑的那么复杂，我们要做的只是让图片能根据不同分辨率自适应罢了，我们不管图片会不会因为被拉伸而失真，因为真的遇到这样的情况，我们可以考虑在不同分辨率下使用不同的图片，这样就简单多了。所以让图片尺寸自适应，我们只要不给图片设定具体的宽高尺寸，只要在样式中给该图片一个width：100%，这样图片就能根据它父容器的尺寸自动调整了。

4、媒体查询(media query)，这个也是响应式页面的一个关键技术，根据不同的分辨率去调整一些不同的样式。

语法结构及用法

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}

在link中使用@media：

上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

在样式表中内嵌@media：

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

使用 Media Queries 适配对应样式

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

设备类型(media type):

all所有设备

screen 电脑显示器

print打印用纸或打印预览视图

handheld便携设备

tv电视机类型的设备

speech语意和音频盒成器

braille盲人用点字法触觉回馈设备

embossed盲文打印机

projection各种投影设备