如何通过 CSS3 实现响应式布局? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
"自适应响应式网页设计" 到底是怎么做到的? 其实并不难.
首先, 在网页代码的头部, 加入一行 viewport 元标签.
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
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-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]->
不使用绝对宽度
由于网页会根据屏幕宽度调整布局, 所以不能使用绝对宽度的布局, 也不能使用具有绝对宽度的元素. 这一条非常重要.
具体说, CSS 代码不能指定像素宽度: width:xxx px; 只能指定百分比宽度: width: xx%; 或者 width:auto;
相对大小的字体
字体也不能使用绝对大小(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) 的使用, 也要非常小心.
选择加载 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: none;width: auto;} #sidebar { display: none'}}
上面的代码意思是, 如果屏幕宽度小于 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: bicubic;}
或者, Ethan Marcotte 的 imgSizer.JS.
addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });
不过, 有条件的话, 最好还是根据不同大小的屏幕, 加载不同分辨率的图片. 有很多方法可以做到这一条, 服务器端和客户端都可以实现.
更多 CSS 的相关知识, 可访问: web 前端课程 https://www.html.cn/ !!
来源: http://www.css88.com/qa/css3/18029.html