第一步：在网页代码的头部，加入一行viewport元标签

    <meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，
上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），
原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

1、

在iPhone的浏览器中页面将以原始大小显示，不允许缩放。

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

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

2、

ios设备对meta定义的私有属性：（可以添加至主屏幕）

<meta name="apple-mobile-web-app-capable" content="yes" />

•网站开启对web app程序的支持。

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

•在web app应用下状态条（屏幕顶部条）的颜色；
•默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

•若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

3、

在iPhone 手机上默认值是（电话号码显示为拨号的超链接）：

<meta name="format-detection" content="telephone=yes"/>

可将telephone=no，则手机号码不被显示为拨号链接

<meta name="format-detection" content="telephone=no"/>

所有主流浏览器都支持这个设置，包括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]-->

第二步：（注意）不使用绝对宽度，字体大小

width:auto; / width:XX%;

第三步：（注意）字体大小

字体大小是页面默认大小的100%，即16像素
字体不要使用绝对大小"PX"，要使用相对大小“EM”

html{font-size:62.5%;}  
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

第四步：流动布局

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

    .left{ width:30%; float:left}

    .right{ width:75%; float:right;}

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

第五步：选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件

    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)"

    href="style/css/css600.css" />

上面的代码意思是，如果屏幕宽度小于600像素（max-device-width: 600px），就加载css600.css文件。

如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件

    <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)"

    href="css600-980.css" />

另有(不建议使用)：除了用html标签加载CSS文件，还可以在现有CSS文件中加载

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

第六步：CSS的@media规则

@media screen and (max-device-width: 400px) {  .left{ float:none;} }

当屏幕小于400时，left取消了浮动

第七步：图片的自适应

"自适应网页设计"还必须实现图片的自动缩放。

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

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

img {width: 100%;}

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

img { width:100%; -ms-interpolation-mode: bicubic;}

或使用js--imgSizer.js

    addLoadEvent(function() {

    　　　　var imgs = document.getElementById("content").getElementsByTagName("img");

    　　　　imgSizer.collate(imgs);

    　　});

注：如有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片

简易式操作：

    <style type="text/css">

    img{ max-width:100%;}

    video{ max-width:100%; height:auto;}

    header ul li{ float:left; list-style:none; list-style-type:none; margin-right:10px;}

    header select{display:none;}

    @media (max-width:960px){

        header ul{ display:none;}

        header select{ display:inline-block;}

    }

    </style>  

    <body>

    <header>

        <ul>

            <li><a href="#" class="active">Home</a></li>

            <li><a href="#">AAA</a></li>

            <li><a href="#">BBB</a></li>

            <li><a href="#">CCC</a></li>

            <li><a href="#">DDD</a></li>

        </ul>

        <select>

            <option class="selected"><a href="#">Home</a></option>

            <option value="/AAA">AAA</option>

            <option value="/BBB">BBB</option>

            <option value="/CCC">CCC</option>

            <option value="/DDD">DDD</option>

        </select>

    </header>  

    </body>

HTML5----响应式（自适应）网页设计的更多相关文章

  1. 60个响应式的Web设计教程–能够手机访问！

    想要学习响应式[responsive:屏幕自适应的效果]的网页设计和开发技术?在这个超大的收藏集合中,我想你定会找到想要开始学习的响应式网页设计教程. 面对超过1亿的手机互联网用户,开发专业和用户友好 ...

  2. 为何企业钟爱H5响应式网站? html5响应式网站的优势与特点

    随着移动互联网时代的到来,H5响应式网站应运而生,并成功获得了商家.访客.搜索引擎等的青睐!越来越多的企业也选择了H5响应式建站,可为何企业钟爱H5响应式网站呢?难道传统网站不好吗?这个不能妄下结论, ...

  3. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  4. paip.自适应网页设计 跟 响应式 设计方法与工具补充（2）o54

    paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54 #-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝 ...

  5. （转）自适应网页设计（或称为响应式web设计）（Responsive Web Design）

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  6. 自适应网页设计/响应式Web设计

    zccst转 很早就有人设想,能不能”一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)? 一.”自适应网页设计”的概念 2010年,Ethan Ma ...

  7. 阮一峰：自适应网页设计（Responsive Web Design）别名（响应式web设计）

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  8. 自适应网页设计（Responsive Web Design）别名（响应式web设计）转载阮一峰

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  9. paip.自适应网页设计 同 响应 与设计的原理的差and实践总结

    paip.自适应网页设计 同 响应 与设计的原理的差and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  10. Html5响应式设计与实现广场

    由于提出的想法响应式设计,越来越多的网站使用这样的思想.各类大型网站如雨后春笋般涌了出来.例如:小米商城.天猫等. 至于响应式设计的概念等大家能够去百度百度,我这里就不相信解说了.直接为大家带来源代码 ...

随机推荐

  1. golang做的邮件服务器

    https://gowalker.org/github.com/gleez/smtpd https://www.v2ex.com/t/133221

  2. Android本地视频播放器开发--视频解码

    在上一章Android本地视频播放器开发--SDL编译编译中编译出sdl的支持库,当时我们使用的2.0,但是有些api被更改了,所以在以下的使用者中我们使用SDL1.3的库,这个库我会传上源码以及编译 ...

  3. Android改变系统自带环形ProgressBar的大小

    MainActivity如下: package cc.testprogressbar; import android.os.Bundle; import android.app.Activity; / ...

  4. Cocos2d-x layout （二）

    相对某个控件进行布局 Size widgetSize = Director::getInstance()->getWinSize(); Text* alert = Text::create(&q ...

  5. VS2012配置astyle格式化代码

    1.工具->扩展和更新,搜astyle插件,下载安装重启,当前是2.0版本. 2.工具->选项->AStyle Formatter->Edit,填入下面的,点击save,确定. ...

  6. python web

    [root@xen202 wbk]# python -m SimpleHTTPServerServing HTTP on 0.0.0.0 port 8000 ...

  7. Delphi的指针 good

    Pointers are like jumps, leading wildly from one part of the data structure to another. Their introd ...

  8. 14.3.5.1 An InnoDB Deadlock Example

    14.3.5 Deadlocks in InnoDB 14.3.5.1 An InnoDB Deadlock Example 14.3.5.2 Deadlock Detection and Rollb ...

  9. c 可变参数 定义可变参数的函数

    定义可变参数的函数,需要在stdarg.h头文件中定义的va_list类型和va_start.va_arg.va_end三个宏. 定义可变参数函数 va_list ap;  //实际是定义一个指针va ...

  10. listview改变选中行字体颜色

    [android]listview改变选中行字体颜色 目标:选中item,其字体设置为#3197FF,未选中的,其字体为#FFFFFF 与listvew设置选中行item背景图片一样,使用select ...