草丁图书馆

  1. 首页 > 生活杂烩 >

如何让网页自适应屏幕，怎么让网页自适应屏幕大小( 四 )

小知识


a、不要混合使用层和表格排版 ， 如果是父子关系 ， 如层中表格 ， 不在此原则范围内 。
b、内联式的 CSS 在 Netscape Navigator 中经常会出现问题 ， 使用链式或内嵌式 。
c、有时需要在空层插入表格或者透明图片 ， 以保证在 Netscape Navigator 里的效果 。
d、对于只有几个像素宽度或高度的层 ， 改用图片来实现 。
e、避免使用 W3C 组织不推荐的排版属性 ， 用 CSS 代替 。
如何让网页自适应各种分辨率 “自适应网页设计”到底是怎么做到的？其实并不难 。

1.首先 ， 在网页代码的头部 ， 加入一行viewport元标签 。
viewport是网页默认的宽度和高度 ， 上面这行代码的意思是 ， 网页宽度默认等于屏幕宽度（width=device-width） ， 原始缩放比例（initial-scale=1）为1.0
 ， 即网页初始大小占屏幕面积的100% 。
所有主流浏览器都支持这个设置 ， 包括IE9 。 对于那些老式浏览器（主要是IE6、7、8） ， 需要使用css3-mediaqueries.js 。

2、不使用绝对宽度由于网页会根据屏幕宽度调整布局 ， 所以不能使用绝对宽度的布局 ， 也不能使用具有绝对宽度的元素 。 这一条非常重要 。 具体说 ， CSS代码
不能指定像素宽度：width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
3、相对大小的字体
字体也不能使用绝对大小（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文件 。

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

如果屏幕宽度在400像素到600像素之间 ， 则加载smallScreen.css文件 。
除了用html标签加载CSS文件 ， 还可以在现有CSS文件中加载 。
五、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）
除了布局和文本 ， ”自适应网页设计”还必须实现图片的自动缩放 。

推荐阅读


上一篇：上火体质如何调理，容易上火的人吃什么调理

下一篇：如何增厚脸部角质层，脸上有死皮角质层增厚