什么是响应式网页

 

什么是响应式网页

 2000: 塞班、黑莓，GPRS，2.5G，可以浏览WML网页

 2008: iOS/Linux，3G，Safari，可以浏览HTML网页

  Android/Linux，Chrome，可以浏览HTML网页

 Responsive Web Page 响应式/自适应网页，一个页面，可以在PC、平板、手机下正常/愉快的浏览。编写响应式应该在3方面加以注意：

  (1)采用流式布局

  (2)自适应的图片和文字大小

  (3)CSS3媒体查询技术

 

如何测试响应式网页

  三种测试方法：

  (1)使用真实的物理设备来测试

  优点：测试结果真实可靠

  不足：测试工作量太大

  (2)使用模拟软件来测试

优点：物理设备减少

不足：效率偏低，部分功能无法测试，测试结果有待进一步验证

  (3)使用Chrome自带的设备模拟器来测试

  优点：功能丰富(模拟多种设备、网速、经纬度、加速度....)

不足：测试结果有待进一步验证

 

2010年之前，所有的HTML网页都是为PC编写，iOS中浏览这样的网页，只能把所有的内容缩放到刚刚好可以在手机屏幕中观看——文字、图片缩放的很小近乎无法观看。

iOS最先提出了viewport的概念，宽和高可以指定为任意大，从而可以在一个较小手机屏幕下不经缩放的浏览一个很大的网页——副作用是：用户可能不得不左右滑动屏幕。Android系统后来也采用了此概念。

 

 

7.如何编写响应式网页——重点

  (1)声明viewport元标签——只对iOS和Android

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

避免用户左右滑动屏幕的问题，初始时不进行缩放，且不允许用户缩放

  (2)尺寸和大小不要使用绝对单位（如px），而用相对单位，如%、auto、em

  (3)采用流式布局

  (4)使用自适应/响应式图片

img {

max-width: 100%; /*指定占父元素的百分比，且不能超过自身原始大小，防止无限放大*/

}

  (5)根据当前浏览设备的不同，有选择性的执行不同的CSS代码——CSS3 Media Query——实现响应式网页最最重要的技术！

 

8.CSS3媒体查询技术

  Media：浏览网页的设备，如screen、print、tv、projection、tty、braille.....

  Media Query：CSS3中提供的一门技术，可以自动查询出当前浏览设备的种类、宽高、分辨率、色彩位深、方向(portrait、landscape)等物理特性，有选择性的执行不同的CSS代码。

  具体有两种用法：

  (1)有选择的执行不同的外部CSS文件

<link media="screen and (min-width:768px) and (max-width:992px)" rel="stylesheet" href="xx.css">

  缺陷：不论当前的浏览设备什么类型，所有link的css文件都会被加载，但有可能不会被执行。

  (2)有选择性的执行某个CSS文件中的部分内容

在一个CSS文件中，编写：

@media screen and (min-width:768px) and (max-width:992px) {

body { ... }

.box { ...}

}

 

 

爱卡（深圳）管理有限公司

       分享每一刻精彩

     微信：iCafeYOJOY

    微博：http://weibo.com/iCafeYOJOY

    官网：www.icafe.im