响应式页面的原理、快速构建和适用范围

响应式页面相信大家都不陌生了,在当今的互联网世界几乎随处可见。今天从响应式分布的原理、基础知识、和页面创建以及注意事项等方面探讨,希望大家对响应式页面有个较为全面的把握。

原理

随着显示终端设备的多样化,出现了各种尺寸的屏幕。而传统的网页主要针对桌面电脑而设计和制作的,电脑显示器屏幕虽然也有多个规格,但相对固定,页面内容区的版块宽度一般也设置为980px。而移动互联网的发展,各种屏幕的手机、pad等出现后,情况变得复杂,但是毕竟移动是趋势,为了给移动端查看网页更好的体验,必须做适合于移动端设备的页面。

那么问题了,怎么盘?

一个方法是为不同的设备专门制作对应的网站:当用户访问的时候,还是访问PC的域名,然后识别用户的设备,跳转到对应的专门移动端页面,这也就是很多网站m.域名的由来。另一个方法是,和PC同样的页面,当用户访问的时候,不根据用户的设备类型,而是根据用户的设备的屏幕大小,然后对页面应用与PC端不同的样式,使这个页面在这个设备上看起来像是为移动端专门做的页面,这就是现在流行的响应式页面设计——Responsive Design。

两种方法的优劣显而易见。第一种方法开发、运营、推广各种成本几乎就double了,但可以提供更为专业的移动端体验,所以说,除非这个网站盈利够大,要求很高,而且主要是有钱,可以这么干。第二种方法就是两个字——省事,就是编写一个页面,适应所有设备。

下面开始介绍这种省事又酷炫的方法。

从基础开始修炼

基础

meta标签设置视口(viewport)

首先说说viewport,也就是移动开发中经常提及的viewport,当然移动设备的viewport还涉及到物理像素和逻辑像素的问题,在此不做更深的讨论。总之,这个viewport是指网页浏览器(不管是PC还是移动端)中呈现网页的区域,站在用户的角度来说,就是用户能看到的地方。正常来说,这个视口的宽度和设备宽度(屏幕宽度)是一样的,但也有例外,比如当你缩放拖拽浏览器的时候,视口也会随之变化(这也是个检查页面是响应式效果的小窍门)。

视口的宽度获取是响应式设计的基础,响应式页面的响应也就是响应视口宽度的变化。那该如何准确获取视口宽度呢?

两种思路。

一种是用JS获取并且修改CSS。但这种方法除了有js无法使用的风险,更主要的是结果并不是我们想要的。通过document.documentElement.clientWidth获得的设备宽度是厂家设置的宽度(也就是竖屏时候的宽度),也就是当横屏的时候,js获取的还是原来的宽度,这就是实际情况不符了。

另外一种方式是通过设置HTML meta标签来约束视口,其实是控制浏览器如何来渲染网页。代码为:

其中“width=device-width”设置视口为设备宽度,“initial-scale=1.0”设置初始化的视口大小是1.0倍

“maximum-scale=1.0”规定允许放大的最大倍数是1倍,“user-scalable=no ”不允许缩放视口,这样保证了与设备显示宽度一致。

CSS媒体查询(Media Query)

CSS媒体查询是响应式页面的核心所在,主要功能是对不同的宽度做出不同的CSS动作(响应),并将这种动作告知浏览器。媒体查询的语法是@Media 和 and操作符,分别查询设备类型和设备属性。比如

@media screen and (min-width:900px){

body

}

意思是对所有的屏幕,当宽度大于等于(最小宽度)为900px的时候,应有此样式。比如设备宽度为980px的时候,body的背景颜色设置为蓝色。

同样,可以用and连接多个条件,做地更细化。

@media screen and (min-width:600px) and (max-width:900px){

p{ color:red}

}

意思是对所有的屏幕,当宽度大于在600和900像素之间(包含),将P标签内容的颜色设置为红色。

需要注意的是,IE一些低版本的浏览器如IE6、7、8是不支持媒体查询的,尽管已经很古老,但还是要避免,所以需要先写一个基础的CSS,一些特殊的需要变化的CSS代码则可以在媒体查询里。

创建

有了以上的基础,我们结合流式布局和栅栏布局概念,就可以自己开着手开发响应式页面,当然也可以利用其它现有的工具来提高开发速度。

目前主流前端UI框架都是响应式的,比如Bootstrap、jquery UI、dojo等。下面以Bootstrap为例,师范如何快速创建一个响应式页面。

先到bootstrap官网下载响应的文件,或者你可以用线上的,不过还是建议下载到本地。

注意可以把css和js文件路劲换成本地路径(相对路径),其中bootstrap.min.css和bootstrap.min.js是Bootstrap的核心文件,而bootstrap.min.js是依赖于JQ的,所以,JQ必须在bootstrap.min.js之前加载。这样,你就结合Bootstrap的栅格系统和各种组件搭建自己的响应式页面了,另外,入股你觉得Bootstrap的样式不好看,你可以可以借助媒体查询,在bootstrap.min.js之后引入自己的自定义css覆盖默认的样式。

小技巧

当我们在做响应式页面的调试和测试的时候,不需要真的拿所有的真机来测试,如果有是最好。可以采用各种仿真模拟器来检测,准确度还是挺高的。浏览器就有各种常用设备的模拟,以谷歌为例。F12打开调试版,然后点那个手机图标就可以选择对应的设备来模拟了。

注意事项

响应式尽管酷炫省事,也并不是完美无缺。一方面响应式页面可以适应多种设备,但只是页面一样,为了提高移动设备,不可避免需要通过舍弃一些内容来减负。减负其实是迫不得已的做法,用户体验不好,更很难和APP的体验,这对于那种展示型网站或许是一个好的选择,但并不适合所有的网站。即使最终的呈现效果看内容减少了,但是这是在完全加载页面内容之后处理后的结果,也就是对移动端而言,前期浪费了很多时间和流量加载了一些没用的内容。另外一个方面是虽然兼容不同的设备,但是还是同一个有页面,这就会给搜索引擎蜘蛛造成困扰,不利于SEO的推广。

总之,响应式设计有好有坏,关键看什么时候怎么使用。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20190116A1GR4C00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券