页面响应式技巧-简摘

1、布局

      先创建一个非响应的布局，页面宽度固定大小。然后添加媒体查询（Media Queries）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。

      然后做如下设置（屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。）

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

 

 2 、媒体——视频或图像

1）img

img { max-width: 100%; }

 

     根据客户端的显示大小，显示不同的图像。

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

     使用 data-* 属性来存储替换图像的 URL。然后匹配 min-device-width 条件的媒体指定替换图像：

@media (min-device-width:600px) {
    img[data-src-600px] {content: attr(data-src-600px, url);}
}
@media (min-device-width:800px) {
    img[data-src-800px] { content: attr(data-src-800px, url);}
}

2）视频-弹性视频技术

<div class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

.video-container { position: relative; padding-bottom: 56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-container iframe,.video-container object,.video-container embed {position:absolute; top:0;left:0; width:100%; height:100%;}

3 、字体

      响应式的字体大小应关联它的父容器的宽度，这样它才可以适应客户端的屏幕。

      使用 CSS3 规范引入的一个新的单位叫 rem，和 em 类相似（注：ie6不支持rem）。

1）充值html字体

 

html { font-size:100%; }

 

 2）定义响应式的字体大小

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} }