css响应式网页设计：自适应屏幕宽度、移动页面开发技巧

﹏ヽ暗。殇╰゛Y 2021-09-28 04:52 1228阅读 0赞

# html响应式网页设计：自动适应屏幕宽度 #

### 文章目录 ###

*  html响应式网页设计：自动适应屏幕宽度
 *   *  背景
     *  一、”自适应网页设计”的概念
     *  二、允许网页宽度自动调整-使用meta标签：viewport
     *  三、设置相对宽度
     *   *  扩展：建议使用css3单位rem
     *  四、设置相对的字体大小
     *  五、流动布局（fluid grid）- 使用百分比、浮动布局
     *  六、使用媒体查询
     *   *  1、html文件中加载CSS
         *  2、CSS文件中import加载
         *  3、CSS文件的使用@media规则
     *  七、图片的自适应（fluid image）
     *   *  1、图片的自动缩放。
         *  2、CSS 响应式图片-加载不同分辨率的图片
     *  移动端页面开发技巧：

## 背景 ##

移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

## 一、”自适应网页设计”的概念 ##

2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

## 二、允许网页宽度自动调整-使用meta标签：viewport ##

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。  
viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。  
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。  
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>正整数 或 device-width</td> 
   <td>定义视口的宽度，单位为像素</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>正整数 或 device-height</td> 
   <td>定义视口的高度，单位为像素，一般不用</td> 
  </tr> 
  <tr> 
   <td>initial-scale</td> 
   <td>[0.0-10.0]</td> 
   <td>定义初始缩放值</td> 
  </tr> 
  <tr> 
   <td>minimum-scale</td> 
   <td>[0.0-10.0]</td> 
   <td>定义缩小最小比例，它必须小于或等于maximum-scale设置</td> 
  </tr> 
  <tr> 
   <td>maximum-scale</td> 
   <td>[0.0-10.0]</td> 
   <td>定义放大最大比例，它必须大于或等于minimum-scale设置</td> 
  </tr> 
  <tr> 
   <td>user-scalable</td> 
   <td>yes/no</td> 
   <td>定义是否允许用户手动缩放页面，默认值yes</td> 
  </tr> 
 </tbody> 
</table>

首先，在网页代码的头部，加入一行viewport元标签。

或者

所有主流浏览器都支持这个viewport设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

## 三、设置相对宽度 ##

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：width:xxx px;只能指定百分比宽度：width: xx%;或者width:auto;

### 扩展：建议使用css3单位rem ###

rem是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p { font-size:14px; font-size:.875rem;}

默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。

通常情况下，为了便于计算数值则使用62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视具体情况而定。设置方法如下：

Html{ font-size:62.5%(10/16*100%)}

具体不同屏幕下的规则定义，即基数的定义方式：可以通过CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过js一次定义方法如下：

## 四、设置相对的字体大小 ##

字体也不能使用绝对大小（px），而只能使用相对大小（em）。  
body \{font: normal 100% Helvetica, Arial, sans-serif;\}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。  
h1 \{font-size: 1.5em;\}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。  
small \{font-size: 0.875em;\}

small元素的大小是默认大小的0.875倍，即14像素  
（14/16=0.875）。

## 五、流动布局（fluid grid）- 使用百分比、浮动布局 ##

“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main { float: right;width: 70%;}
    
    .leftBar { float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

## 六、使用媒体查询 ##

“自适应网页设计”的核心，就是CSS3引入的Media Query模块，自动探测屏幕宽度，然后加载相应的CSS文件。  
媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。  
媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

### 1、html文件中加载CSS ###

**如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。**

**如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。**

### 2、CSS文件中import加载 ###

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择导入不同CSS文件。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

### 3、CSS文件的使用@media规则 ###

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

@media screen and (max-device-width: 400px) { 
    	.column { 
    	float: none;
    	width:auto;
    	}
    	
    	#sidebar { 
    	display:none;
    	}
    }

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

## 七、图片的自适应（fluid image） ##

### 1、图片的自动缩放。 ###

这只要一行CSS代码：

img {  max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object {  max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img {  width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img {  -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() { 
    
    var imgs = document.getElementById("content").getElementsByTagName("img");
    
    imgSizer.collate(imgs);
    
    });

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

### 2、CSS 响应式图片-加载不同分辨率的图片 ###

对于很多 IOS 开发者来说可能已经不太陌生了，为了适配Retina 屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」，  
设置不同屏幕下的图片加载url，例如：

.mod .hd h3 {  background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png );/* 普通屏幕 */
    /* ------------ Retina ------------ */
    @media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */ 
     only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */ 
     only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */ 
     only screen and (min-resolution: 240dpi), /* 标准 */ 
     only screen and (min-resolution: 2dppx) /* 标准 */ 
     {  
    .mod .hd h3{  
    background-image:url(http://img02.taobaocdn.com/tps/i2/T1t9wzXlxXXXczY8cm-212-310.png); 
    background-size: 106px 155px; 
    } 
    }

## 移动端页面开发技巧： ##

1、先调查用户的使用情况，总结出大部分用户使用的都是什么设备访问网站。

2、将他们都罗列出来，然后去写媒体查询

比如：我的用户群体大概是这三种设备

<table> 
 <thead> 
  <tr> 
   <th>设备名称</th> 
   <th>分辨率</th> 
   <th>估算字体大小</th> 
   <th>rem与px转换</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>iphone5</td> 
   <td>320*568</td> 
   <td>font-size：12px；</td> 
   <td>1rem=12px</td> 
  </tr> 
  <tr> 
   <td>iphone6</td> 
   <td>375*667</td> 
   <td>font-size：14px；</td> 
   <td>1rem=14px</td> 
  </tr> 
  <tr> 
   <td>iphone6Plus</td> 
   <td>414*736</td> 
   <td>font-size：16px；</td> 
   <td>1rem=16px</td> 
  </tr> 
 </tbody> 
</table>

先取其中中间的设备来做基本样式的书写

在页面中优先写出媒体查询的标签

width - viewport设备的宽度  
height - viewport设备的高度  
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例  
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放

上面分配好了，按照这种方式写媒体查询

html,body{  height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始样式必须写在最顶部！！！！如果写在媒体查询底部的话就会覆盖上方的媒体查询（因为是层叠样式表嘛~）
    @media screen and (max-width:320px ) { 
        html{ font-size: 12px;}
    }
    @media screen and (min-width:321px) and (max-width:750px ) { 
        html{ font-size: 14px;}
    }
    @media screen and (min-width:751px ) { 
        html{ font-size: 16px;}
    }

将页面中的px转换成相应的rem值

例：

header{ 
        width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
    }