移动端视口
① 如何在移动端实现纯css的自定义布局
在移动端实现纯css的自定义布局的方法：
1、html5主页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
<title>html5 移动端单页面布局</title>
</head>
<body>
<!--页面主体部分-->
<div class="main">
<section class="curr">
<img src="pp_1x.png" alt="">
</section>
<section class="hide">
<img src="css3.jpg" alt="">
</section>
<section class="hide">
<img src="hra.png" alt="">
</section>
<section class="hide">
<img src="company-info_1x.png" alt="">
</section>
</div>
<!--页面菜单按钮-->
<div class="menu">
<ul>
<li class="curr">Html5</li>
<li>Css3</li>
<li>Javascript</li>
<li>About</li>
</ul>
</div>
<script src="js/zepto.js"></script>
</body>
</html>
2、css编写的样式：
<style>
/*初始化css*/
*{ margin:0; padding: 0;}
li{ list-style-type: none;}
img{ max-width: 100%; display: block; margin: 0 auto 5px auto;}
html,body{ width: 100%; height: 100%; background: #e4e4e4;
-webkit-tap-highlight-color: rgba(88,44,22,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
}
/*主体页面样式*/
.main{ width: 100%; height: auto; position: relative;}
.main section{ width: 100%; height: auto; position:absolute; left: 0; top:0; }
.main section.hide{ display: none;}
.main section.curr{ display: block;}
/*菜单样式*/
.menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;}
.menu.menucurr{ background: #ea4c88;}
.menu ul{width: 100%; height: 100%; }
.menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;}
.menu li.curr{ background: #ea4c88;}
.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}
</style>
② pc端和移动端的页面应该怎么开发
应该说，移动端的开发是伴随着HTML5的兴起而出现的，2007年第一款iPhone诞生，2009年HTML5这个名词第一次登上“舞台”。当时的移动互联网开始逐渐兴起，发展到今，移动互联网已经和人们的日常生活密切相关。作为开发者，对于一个崭新的事物，一直在尝试的“路上”，到底最好的开发方式是什么？本文介绍了从移动端诞生到现在，自己探索到的开发方法，并配以相应知识点，欢迎跟大家沟通、分享。初次接触移动端，绝对单位的使用自己接触移动端开发是在2012年，那时候比较新潮的是制作WEBAPP。什么是WEBAPP呢？所谓的WEBAPP就是用网页模拟出原生语言（如iOS）开发的APP交互效果。虽然在表现层面上，HTML5表现突出，但不得不承认的是，在系统性能层面，WEBAPP明显要差于原生应用（即NativeAPP）。这也就使得WEBAPP这条路暂时性的被堵住了。于是，移动端的开发方向逐渐向移动端网页倾斜。对于PC端，我们一直使用的是px（像素）进行代码的书写，但是到了移动端，需要面临不同的分辨率。在2012年的时候，自己和团队成员在写移动端的时候，由于是初次接触，还是在使用px（像素）作为单位。因为在2012年的时候，绝大多数的手机的屏幕大小都是320*480分辨率，所以，即便是使用像素作为单位进行移动端网页开发也是完全可以的。关于视口的知识，可点击查看——移动端H5知识-视口viewport横向百分比，纵向像素值随着移动端的继续发展，在2012年9月，iPhone5上市，开始引领“特殊分辨率”的发展，于是，320*480分辨率的手机屏幕在整个手机市场当中占有的份额越来越少，各种各样的分辨率如雨后春笋般冒了出来。此时我们再进行固定像素进行开发明显是不明智的。于是，我们开始采用百分比（相对度量单位）进行盒模型横向属性（width、左右内边距、左右外边距）的制作，使用em（相对度量单位）实现文字的处理。但盒模型纵向上还是使用固定像素作为单位。但是，这种操作导致了一个问题——主要表现在img标签的处理上。成都软件开发公司标签进行计算的。相比之下，rem的计算起来要简单很多。于是，自己尝试用rem解决横向以及纵向的设置，舍弃掉了百分比，发现还是挺不错的，算是兼容了绝大多数机型和浏览器。之后，在使用一款华为手机进行测试的时候，发现并不支持横向的rem。于是，又需要想法啦~~~正解——横向百分比，纵向rem针对华为手机，我尝试了横向百分比，发现还是能够支持的，于是就折中了一下，横向使用百分比进行控制，纵向使用rem作为单位。此时能够实现所有浏览器的兼容。优化正解——横向百分比，纵向rem在横向使用百分比，纵向使用rem时，会由于计算产生一定的误差，于是，运用学习过的一些HTML5技术，进行移动端页面的优化，例如，使用CSS3的盒阴影替换掉边框。而对于rem，在计算中通常是存在一定的字体误差的（会计算出小数点），此时正好接触了一下淘宝的移动端页面，看到了一个不错的JS框架——flexible.js，通过这个框架对页面进行处理，能够防止小数点的出现。关于flexible.js框架的具体用法，可点击查看——移动端H5知识-处理rem小数点flexible.js优化正解2——任性的使用固定像素来实现上个月月初，发现网易移动端的制作方法有些特殊，查看代码时发现，网易采用了固定像素进行书写，而通过MetaHandler.js进行了页面的控制。最近尝试了一下，感觉还是挺不错的，兼容也是比较好的，不失为一种好方法。关于MetaHandler.js框架的具体用法，可点击查看——移动端H5知识-固定像素的实现方法
③ 如何用html5构建移动端的webapp
H5e教育html5开发为您解答：
移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。
1.四大浏览器内核
1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。
2.Gecko:( FireFox )优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。
3.Webkit: ( Chrome/ Safari / UC )优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。
4.Presto: ( 欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。
移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，基于Webkit内核，可使用Chrome浏览器调试即可。
2.手机浏览器
浏览器已经逐渐从传统桌面转向手机端，竞争也越来越激烈。目前国内市场主流的手机浏览器：UC、网络、欧朋、QQ、海豚、safari、Chrome，这些浏览器都是基于webkit内核的，兼容性方面不存在问题，同时对html5和css3的支持很好，所以，大胆地应用html5和css3技术吧。
在开始编写webapp时，前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。
3.终端分辨率
手机分辨率比PC分辨率要庞杂得多，各种分辨率有木有？大小差距那么大有木有？这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素，必须有充分的考虑。考虑到浏览器自适应，需要设计和制作完成各种不同的方法。
1) 市场上主流手机生产商的产品分辨率。经过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据需要花费不少的精力，那是数据分析人员的工作。
2) 项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从一定程度上来说比第一点来得更加重要，它决定着项目开发的方向。
4.响应式web开发
在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付 宝 采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。
响应式web开发不是一项开创性的技术变革，简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点，我觉得不难，请继续往下：
1) 准备工作：
a) 插件安装：window resize。您可以通过下载安装谷歌浏览器插件，安装成功后，当您调整浏览器窗口时，在浏览器右下角会有灰度提示当前窗口和类似于手机视图的大小提示。
b) 编辑器安装：Hbulder或Webstorm
c) 弄清视图和屏幕的区别。视图是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视图宽度我们一般用width表示，而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。
d) 响应式设计创意网站收集 。这里有很多响应式Web设计的网站，供您参考和学习。
2) 征途ING：
e) 响应式web设计之媒体查询：
为了减少http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为：
@media screen and (max-width:960px){}
大括号内部书写样式。该语句相当于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen代表显示屏，这两个条件都具备了，就调用大括号内的样式。
f) 响应式web设计之流式布局：
流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变 化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。
g) 响应式web设计之液态图片：
要实现液态图片，只需加入如下代码：img{max-width:100%;}
web移动头部书写
1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
<meta content="yes” name=" apple-mobile-web-app-capable" />
meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
<meta content="black" name=" apple-mobile-web-app-status-bar-style" />
meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
<meta content="telephone=no" name="format-detection" />
meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
④ jquery mobile可以使用jqueryui吗
楼主如果用到jquery mb的话，那么比较推荐就使用他内部的样式就好了,MB一般用于开发移动端视口，而ui更多的是用于桌面端浏览器视口，当然也会在移动端有自适应，但是效果没有MB好，所以二者应该是不必混为一谈的，MB貌似很久没碰了，以前用它做过一个小的WEB APP ，感觉还是有点不好用，所以放弃了。
⑤ 如何进行移动端的页面开发
应该说，移动端的开发是伴随着HTML5的兴起而出现的，2007年第一款iPhone诞生，2009年HTML5这个名词第一次登上“舞台”。当时的移动互联网开始逐渐兴起，发展到今，移动互联网已经和人们的日常生活密切相关。作为开发者，对于一个崭新的事物，一直在尝试的“路上”，到底最好的开发方式是什么？本文介绍了从移动端诞生到现在，自己探索到的开发方法，并配以相应知识点，欢迎跟大家沟通、分享。
初次接触移动端，绝对单位的使用
自己接触移动端开发是在2012年，那时候比较新潮的是制作WEB APP。什么是WEB APP呢？所谓的WEB APP就是用网页模拟出原生语言（如iOS）开发的APP交互效果。虽然在表现层面上，HTML5表现突出，但不得不承认的是，在系统性能层面，WEB APP明显要差于原生应用（即Native APP）。这也就使得WEB APP这条路暂时性的被堵住了。
于是，移动端的开发方向逐渐向移动端网页倾斜。对于PC端，我们一直使用的是px（像素）进行代码的书写，但是到了移动端，需要面临不同的分辨率。在2012年的时候，自己和团队成员在写移动端的时候，由于是初次接触，还是在使用px（像素）作为单位。因为在2012年的时候，绝大多数的手机的屏幕大小都是320*480分辨率，所以，即便是使用像素作为单位进行移动端网页开发也是完全可以的。
关于视口的知识，可点击查看——移动端H5知识-视口viewport
横向百分比，纵向像素值
随着移动端的继续发展，在2012年9月，iPhone5上市，开始引领“特殊分辨率”的发展，于是，320*480分辨率的手机屏幕在整个手机市场当中占有的份额越来越少，各种各样的分辨率如雨后春笋般冒了出来。
此时我们再进行固定像素进行开发明显是不明智的。于是，我们开始采用百分比（相对度量单位）进行盒模型横向属性（width、左右内边距、左右外边距）的制作，使用em（相对度量单位）实现文字的处理。但盒模型纵向上还是使用固定像素作为单位。
但是，这种操作导致了一个问题——主要表现在img标签的处理上。成都软件开发公司http://www.yingtaow.com?对于图片来说，只需要设置横向百分比，纵向会自动等比例缩放。在列表页以及内容页还好，毕竟内容是自动撑开父级高度的；但是在首页或者二级页，但凡涉及到父级元素高度固定的盒模型，里面的img就会出现变形（压缩或者拉伸）的问题。
这个问题也是困扰了自己许久，但是一直没有找到一个非常好的解决办法。
响应式布局
当自己还在纠结img的处理时，2013年，在北京流行起了一种新的技术——响应式布局。通过媒体查询，针对不同大小分辨率的设备，设置不同的样式。应该说，对移动端页面的开发帮助不大，原因在于，响应式的出现主要是因为我们希望一段代码能够同时适配PC端、平板电脑以及手机。由于三种平台的样式以及用户体验应该是迥然不同的，那么此时，我们就需要有“断点”，在不同位置，有不同的样式，而在两个“断点”之间的样式，则使用相对单位做“渐变性的过渡”。
应该说，响应式布局解决了典型的屏幕像素不同样式的问题，但是却依旧搞定不了之前的那个问题。
关于CSS3媒体查询的知识，可点击查看——移动端H5知识-CSS3媒体查询
横向纵向均百分比
在横向百分比，纵向像素值的方法无效时，自己能够想到的就是纵向也设置为百分比了，但是却发现，盒模型属性在纵向上的一些设置上是存在问题的，如padding-top/bottom、margin-top/bottom等。而文本属性中line-height在设置百分比时也并不是按照当前元素高度计算的。
于是，横纵向均设置为百分比的方法就破灭了~
关于盒模型的一些问题以及背景的合理使用，可点击查看——移动端H5知识-百变盒模型以及移动端H5知识-背景的妙用
横向纵向rem
随着HTML5的发展，除了原来的em单位，又新增了rem单位。这两个单位都是相对单位。1em表示的是当前元素一个字体大小的尺寸；而1rem，也表示的是一个字体大小的尺寸，但是是针对html标签进行计算的。相比之下，rem的计算起来要简单很多。于是，自己尝试用rem解决横向以及纵向的设置，舍弃掉了百分比，发现还是挺不错的，算是兼容了绝大多数机型和浏览器。之后，在使用一款华为手机进行测试的时候，发现并不支持横向的rem。于是，又需要想办法啦~~~
正解 —— 横向百分比，纵向rem
针对华为手机，我尝试了横向百分比，发现还是能够支持的，于是就折中了一下，横向使用百分比进行控制，纵向使用rem作为单位。此时能够实现所有浏览器的兼容。
优化正解 —— 横向百分比，纵向rem
在横向使用百分比，纵向使用rem时，会由于计算产生一定的误差，于是，运用学习过的一些HTML5技术，进行移动端页面的优化，例如，使用CSS3的盒阴影替换掉边框。而对于rem，在计算中通常是存在一定的字体误差的（会计算出小数点），此时正好接触了一下淘宝的移动端页面，看到了一个不错的JS框架——flexible.js，通过这个框架对页面进行处理，能够防止小数点的出现。
关于flexible.js框架的具体用法，可点击查看——移动端H5知识-处理rem小数点 flexible.js
优化正解2 —— 任性的使用固定像素来实现
上个月月初，发现网易移动端的制作方法有些特殊，查看代码时发现，网易采用了固定像素进行书写，而通过MetaHandler.js进行了页面的控制。最近尝试了一下，感觉还是挺不错的，兼容也是比较好的，不失为一种好方法。
关于MetaHandler.js框架的具体用法，可点击查看——移动端H5知识-固定像素的实现方法
⑥ HTML5如何利用rem实现自适应布局
分析设计图
假设设计图大小为1080px。这也就意味着，在开发时，需要兼容的最大分辨率为1080px，最小的为320px。
2.调整视口
代码实例：
<!DOCTYPEhtml>
<head>
<metacharset="UTF-8"/>
<title>布局之路-移动端开发实例</title>
<metaname="viewport"content="width=device-width,user-scalable=no"/>
<linkrel="stylesheet"type="text/css"href="css/reset.css"/>
</head>
<body>
<divclass="wrap"></div>
</body>
</html>
代码解析：由于使用不同设备打开网页时，宽度均有所不同，所以不能讲视口设置为固定值，应当为width=device-width,即将视口设置为当前设备的宽度。
3. 确定设计图的最小字体
浏览器（部分）能够显示的最小字体未12px，当移动端页面宽度为320px时，要保证最小字体为12px，那么在1080px的设计图中，最小字体应当为42px。
代码实例：
<styletype="text/css">
html{
font-size:42px;
}
</style>
4. 按照设计图的像素进行开发
按照正常网页开发流程，进行网页开发即可。
5. 使用百分比和rem替换px
代码效果对比：
/*使用固定像素*/
.box{
float:left;
width:658px;
font-size:72px;
text-align:center;
line-height:195px;
}
/*使用百分比和rem*/
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}
代码解析：
水平方向的值，将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。
例如，父级宽度为1080px， 子级元素为197px，那么子元素转换为百分比为：197/1080*100%=18.24%。需要注意的是百分比根据父级计算，当标签结构级别不同时，计算公式中的“分母”也有所不同，在开发时这个地方很容易出现问题，请务必注意。
垂直方向的值，将具体像素调整为rem，与水平方向相比，垂直方向的计算就比较简单。例如，行高为195px，HTML标签当前的字体大小为42px，将行高转换为rem单位，即195/42= 4. 64rem。
⑦ 移动端html5移动开发的欢迎页面怎么写入场欢迎页面怎么写
自己接触来移动端开发是在源2012年，那时候比较新潮的是制作WEB APP。什么是WEB APP呢？所谓的WEB APP就是用网页模拟出原生语言（如iOS）开发的APP交互效果。虽然在表现层面上，HTML5表现突出，但不得不承认的是，在系统性能层面，WEB APP明显要差于原生应用（即Native APP）。这也就使得WEB APP这条路暂时性的被堵住了。
于是，移动端的开发方向逐渐向移动端网页倾斜。对于PC端，我们一直使用的是px（像素）进行代码的书写，但是到了移动端，需要面临不同的分辨率。在2012年的时候，自己和团队成员在写移动端的时候，由于是初次接触，还是在使用px（像素）作为单位。因为在2012年的时候，绝大多数的手机的屏幕大小都是320*480分辨率，所以，即便是使用像素作为单位进行移动端网页开发也是完全可以的。
关于视口的知识，可点击查看——移动端H5知识-视口viewport
⑧ 移动页面尺寸
<div class="wrap">
<img src="img02.jpg" width="340" height="220" alt="" />
<a href="">按钮</a>
</div>
<style>
.wrap{position:relative;margin:0 auto; min-width:320px;width:100%;}
.wrap img{width:100%;height:auto;}
a{position: absolute;bottom:20px;right:20px;height:40px;padding:0 20px;line-height:40px;background:#A6DA32;color:#461DCD;}
</style>
在wrap设置相对定位position:relative;然后让按钮a绝对定位bottom:20px;right:20px;就可以了 当然也可以用百分百bottom:10%;right:10%;意思就是相对于wrap的右边多少像素或者百分比,相对于下边多少像素或者百分比
如果你想更精确的区分移动端和pc端可以用响应式布局代码判断
/*PC*/
@media screen and (min-width:960px){
a{bottom:20px;right:20px;}
}
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
a{bottom:15px;right:15px;}
}
/*手机*/
@media screen and (max-width:600px){
a{bottom:10px;right:10px;}
}
在第一个里面写在宽度大于960时候所用的css
在第二个里面写想要在宽度大于600并且小于960时候所用的css
在第三个里面写你要在宽度小于600时候所用的css
意思是档浏览器大于960的时候a按钮的属性是bottom:20px;right:20px;
当你将浏览器拉小到960一下600以上的时候就使用bottom:15px;right:15px;
当浏览器小于600的时候a按钮的属性就是bottom:10px;right:10px;
当然如果想使用响应式布局必须声明页头的
<!DOCTYPE html>
和
<meta name="viewport" content="width=device-width, initial-scale=1.0">
⑨ html如何固定页面
这个需要适配一下移动端的
1、需要在某部加上视口代码：
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1">
2、移动端字体大小内不能用px而需要rem这种相对单位才能适容配
⑩ 判断访问的是pc还是移动端然后调用不同的css样式
第一种方式：利用js判断设备类型，应用不同样式文件
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS判断设备类型，应用不同css文件</title>
<linkrel="stylesheet"type="text/css"href="style_A.css"/>
</head>
<body>
<div>
</div>
<scripttype="text/javascript">
varbrowser={
versions:function(){
varu=navigator.userAgent,app=navigator.appVersion;
//移动设备浏览器版本信息
return{
//IE内核
trident:u.indexOf('Trident')>-1,
//opera内核
presto:u.indexOf('Presto')>-1,
//苹果、谷歌内核
webKit:u.indexOf('AppleWebKit')>-1,
//火狐内核
gecko:u.indexOf('Gecko')>-1&&u.indexOf('KHTML')==-1,
//是否为移动终端
mobile:!!u.match(/AppleWebKit.*Mobile.*/),
//ios终端
ios:!!u.match(/(i[^;]+;(U;)?CPU.+MacOSX/),
//android终端或者uc浏览器
android:u.indexOf('Android')>-1||u.indexOf('Linux')>-1,
//是否为iPhone或者QQHD浏览器
iPhone:u.indexOf('iPhone')>-1,
//是否iPad
iPad:u.indexOf('iPad')>-1,
//是否web应该程序，没有头部与底部
webApp:u.indexOf('Safari')==-1
};
}(),
language:(navigator.browserLanguage||navigator.language).toLowerCase()
}
if(browser.versions.mobile||browser.versions.ios||browser.versions.android||browser.versions.iPhone||browser.versions.iPad){ cssChange();
}
functioncssChange(){
varlink=document.getElementsByTagName('link')[0];
//PC端应用的样式文件：style_A.css
alert('当前应用样式文件是：'+link.getAttribute('href'));
link.setAttribute('href','style_B.css');
//Mobile端应用样式文件：style_B.css
alert('当前应用样式文件是：'+link.getAttribute('href'));
}
</script>
</body>
</html>
第二种方式：利用css3的媒体查询，在不同的分辨率下，调用不同的css文件
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用媒体查询做自适应页面</title>
<!--添加视口-->
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<linkrel="stylesheet"type="text/css"href="styleA.css"media="screenand(min-width:320px)and(max-width:480px)">
<linkrel="stylesheet"type="text/css"href="styleB.css"media="screenand(min-width:480px)and(max-width:600px)">
<linkrel="stylesheet"type="text/css"href="styleC.css"media="screenand(min-width:600px)and(max-width:800px)">
<linkrel="stylesheet"type="text/css"href="styleD.css"media="screenand(min-width:800px)">
<!--
创建4个css文件，
styleA.css中样式为//.div_1{width:320px;border:1pxsolidred}
styleB.css中样式为//.div_1{width:480px;border:1pxsolidblue}
styleC.css中样式为//.div_1{width:600px;border:1pxsolidpink}
styleD.css中样式为//.div_1{width:800px;border:1pxsolidblack}
-->
</head>
<body>
<divclass="div_1">
我是Body下的第一个Div元素
</div>
<!--
当屏幕宽度介于320px与480px之间时div元素宽度为320px,边框为红色
当屏幕宽度介于480px与600px之间时div元素宽度为480px,边框为蓝色
当屏幕宽度介于600px与800px之间时div元素宽度为600px,边框为粉色
当屏幕宽度大于800px时div元素宽度为800px,边框为黑色
-->
</body>
</html>