html5+css3静态模板1200个自适应手机端_html5吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：76,801贴子：
html5+css3静态模板1200个自适应手机端收藏
html5+css3静态模板1200个自适应手机端，要的留下QQ也可以联系我QQ:索取部分展示
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或欢迎来到小鱼儿博客园基地，接下来的日子由我来陪伴您度过一个美好的互联网时代@2016 come on！
  加我 QQ 说出您的需求。
1、在HTML头部增加viewport标签。
　　在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：
&meta name=&viewport& content=&width=device-width, initial-scale=1& /&
　　这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
　　例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divSidebar {
　　3、布局宽度使用相对宽度。
　 　网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
　　4、页面使用相对字体
　　在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
　 　根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航 栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入 overflow: 一行即可解决这个问题）。
　　下图是使用iPhone访问的，经过修改CSS为自适应网页后的月光博客首页页面，看起来比原始的未优化页面好多了吧。
　　总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。
以下是更详细的补充资料：
随着3G的普及，越来越多的人使用手机上网。
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能&一次设计，普遍适用&，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、&自适应网页设计&的概念
2010年，Ethan Marcotte提出了&自适应网页设计&（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
&自适应网页设计&到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
　　&meta name=&viewport& content=&width=device-width, initial-scale=1& /&
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
　　&!--[if lt IE 9]&
　　　　&script src=&http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js&&&/script&
　　&![endif]--&
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
　　width:
只能指定百分比宽度：
　　width: xx%;
　　width:
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
　　body {
　　　　font: normal 100% Helvetica, Arial, sans-
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
　　　　font-size: 1.5
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
　　small {
　　　　font-size: 0.875
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）
&流动布局&的含义是，各个区块的位置都是浮动的，不是固定不变的。
　　.main {
　　　　float:
　　　　width: 70%;
　　.leftBar {
　　　　float:
　　　　width: 25%;
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择加载CSS
&自适应网页设计&的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
　　&link rel=&stylesheet& type=&text/css&
　　　　media=&screen and (max-device-width: 400px)&
　　　　href=&tinyScreen.css& /&
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
　　&link rel=&stylesheet& type=&text/css&
　　　　media=&screen and (min-width: 400px) and (max-device-width: 600px)&
　　　　href=&smallScreen.css& /&
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
　　@import url(&tinyScreen.css&) screen and (max-device-width: 400px);
七、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
　　@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float:
　　　　　　width:
　　　　#sidebar {
　　　　　　display:
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
八、图片的自适应（fluid image）
除了布局和文本，&自适应网页设计&还必须实现图片的自动缩放。
这只要一行CSS代码：
　　img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
　　img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
　　img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
　　img { -ms-interpolation-mode: }
或者，Ethan Marcotte的imgSizer.js。
　　addLoadEvent(function() {
　　　　var imgs = document.getElementById(&content&).getElementsByTagName(&img&);
　　　　imgSizer.collate(imgs);
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
转载请注明： >
> 自适应网页设计的方法(手机端良好的访问体验)
与本文相关的文章
发表我的评论您的位置：&&html布局的一种宽度自适应解决方案
目前市面上的显示器分辨率是越来越大，而对网页显示而言意味着一屏可以显示更多的内容『一屏：网页右边没有滚动条、下边也没有滚动条浏览器最大化所可以显示内容区域；这不是一个正规词汇，仅为此文方便书写而生造』。对html布局而言，传统的960px『或者鄙人常用的980px』宽度在大分辨率显示上显示时左右两边则会留下富余的空白空间，当分辨率达到23寸的1920px时传统的980px宽度网页布局则意味着显示器上的一半宽度的位置被闲置......考虑到17寸非主流脑残显示器依然占有不少的份额，同时为大分辨率显示器做适当的适配，一种网页宽度自适应布局应运而生，本文所说的宽度自适应仅仅指pc端的宽度自适应。理论基点：1、最小尺寸分辨率（传统17寸显示器），则可以采用940px、960px、或者鄙人常用的980px作为最小宽度2、之后稍大的分辨率就是了，则可以采用1200px或者1220px作为稍大的网页宽度3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签4、不支持css3、html5的脑残浏览器特别是&=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。6、宽度自适应为不同宽度显示器写布局元素时常用的css
.wrap { display:none;}.wrapBig .xxx { width:xxpx;}.wrapSmall .xxx { width:xxpx;}
实现方式：1、高级浏览器方式，通过media Queries直接控制，比如控制宽度的div类名叫wrap，则有如下代码，此代码仅作抛砖引玉
/**max width 980px**/@media screen and (max-width:1200px) { .wrap { width:980px; }}/**max1280px screen***/@media screen and (min-width:1200px) { .wrap { width:1200px; }}
稍微解释下：第一段当浏览器的可显示区域宽度小于1200px时就将类名为wrap的宽度设置为980px，当浏览器的可显示区域大于1200px时则将类名为wrap的宽度设置为1200px。css3的media queries可以通过拖拽浏览器窗口大小即时显示效果！这样在17寸显示器上时就不会在浏览器的下方出现滚动条，而在大于17寸的显示器上时可以让网页布局宽度增大到1200px，显示更多的内容。2、低级脑残浏览器通过js实现，为了便于调试，同时采用resize事件让网页跟随浏览器窗口大小改变而改变布局元素的宽度，如下代码也进做抛砖引玉
var windowSize=function () { var winWidth,winHeight; //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小 if (document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //返回对象结果 return {'width':winWidth,'w':winWidth,'height':winHeight,'h':winHeight};}//上述代码通过windowSize方法返回当前浏览器一屏窗口的宽度与高度【注意此处一屏的概念】$(document).ready(function ()
{ var PageStyle= function () { var SysWidht = windowSize().width,wrap=$('.wrap');//此处也可以使用jquery的$(window).width()获取页面宽度 if(SysWidht&1200) { wrap.removeClass('wrapBig').addClass('wrapSmall'); }else { wrap.removeClass('wrapSmall').addClass('wrapBig'); } }; /*init*/ PageStyle(); /*event*/ $(window).resize(function () { PageStyle(); });});//注意，此处引用了jquery ！！！//上述代码在页面加载完毕后自动调节类名为wrap的布局元素的类名称 然后在css中依据不同的类名写css代码
稍微解释下原理：通过js读取浏览器的窗口一屏大小，然后调节关键的类名为wrap的布局标签的类名，然后在css中书写相关宽度代码，因为采用了jquery的resize方法[实际就是resize事件]，利用该事件当浏览器窗口大小改变时执行相关代码。那么此段代码放在页面核心js中时势必会在所有浏览器中都执行，这个时候可以使用ie独有的hack触发，假设上述js代码写入在一个单独的js文件中，html中的示例代码如下
&!DOCTYPE html&&!--[if lte IE 6 ]& &html class="ie ie6 lte_ie7 lte_ie8" lang="zh-CN"& &![endif]--&&!--[if IE 7 ]& &html class="ie ie7 lte_ie7 lte_ie8" lang="zh-CN"& &![endif]--&&!--[if IE 8 ]& &html class="ie ie8 lte_ie8" lang="zh-CN"& &![endif]--&&!--[if IE 9 ]& &html class="ie ie9" lang="zh-CN"& &![endif]--&&!--[if (gt IE 9)|!(IE)]&&!--&&html lang="zh-CN"& &!--&![endif]--&&head&&meta charset="UTF-8"&&meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/&&title&宽度自适应 -demo&/title&&meta name="author" content="Jea Yang()"/&&meta name="description" content=""/&&meta name="keywords" content=""/&&meta name="viewport" content="width=device-width"/&&link rel="stylesheet" href="./Public/Style/reset.css"/&&script type="text/javascript" src="./Public/Js/jquery-1.8.1.min.js"&&/script&&!--[if lt IE 9]&&script src="./Public/Js/html5.js"&&/script&&script src="./Public/Js/lte-ie8.js"&&/script&&![endif]--&&/head&
上述html代码中的&!--[if lt ie 9]--&&![endif]--&之间引入该js文件即可；不再多做解释如此，低级脑残浏览器下的则相关核心css代码则如下：
/**for ie adjust width auto commen**/.wrapBig { width:1200px; margin:0 auto;}.wrapSmall { width:980px; margin:0 auto;}
对脑残低级浏览器如此处理后，当拖拽脑残低级浏览器的窗口大小时页面布局也会跟随变化。===============此文仅作原理阐述
转载请注明本文标题和链接：《》
邮箱（必填）
网址（选填）如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？
按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100，那它应该在页面的竖向空间里占满100px的高度。
而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。
那为什么 height:100%; 不起作用
当设计一个页面时，你在里面放置了一个div元素，你希望它占满整个窗口高度，最自然的做法，你会给这个div添加height: 100%;的css属性。然而，如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗？
为了理解为什么不会，你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。
因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height:。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
上面的演示例子是父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。你可以根据父元素的背景色来判断子元素的高度不是100%。
那么，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。换句话说，你需要这样做：
&div style="height: 100%;"&
想让这个div高度为 100% 。
现在你给了这个div的高度为100%，它有两个父元素&body&和&html&。为了让你的div的百分比高度能起作用，你必须设定&body&和&html&的高度。
&html style="height: 100%;"&
&body style="height: 100%;"&
&div style="height: 100%;"&
这样这个div的高度就会100%了
从这个演示中你可以看出，height: 100%;起作用了。
在使用height: 100%;时需要注意的一些事项
1、Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。
2、如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。
相关文章：
扫一扫二维码分享：