【#第一文档网# 导语】以下是®第一文档网的小编为您整理的《手机web――自适应网页设计》，欢迎阅读！
手机web——白适应网页设计（html/css控制） 一. 允许网页宽度白动调整：”白适应网页设计”到底是怎么做到的？ 其实并不难。首先，在网页代码的头部，加入一行 viewport元标签。 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默 认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为 1.0,即网页初始大小占屏幕面积的100%对于viewport属性，我是真正在接 触移动web开发是才遇到的，一把的ps布局都是固定的960px, 1000px这种。 下面三篇文章是对viewport属性详细的解释：Viewport （视区概念） ------ pc 端的理解Viewport （视区概念） ---- 移动端的应用viewport ------- 视区概念（转） 对于老式IE6,乙8浏览器需要js处理，由于主要平台是ios和安卓，所有可以 暂时不考虑 二. 不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对 宽度的布局，也不能使用具有绝对宽度的元素。 这一条非常重要。具体说，CSS弋码不能指定像素宽度：width:xxx px;只能 指定百分比宽度：width: xx%;或者：width:auto;这里开发是指一个网页不仅能用 在ps上，也能同时用于移动端，但是对于 webapp这种还是需要单独做一个 webapp使用的页面。对于这个知识点，对于我目前做的项目有用处，主要用于 控制限定数据库里读出来的图片宽度。详见：手机 webapp的jquerymobile初次 使用心得和解决图片白适应大小问题 三. 相对大小的字体字体也不能使用绝对大小（px）,而只能使用相对大小 （em）。 body { font: normal 100% Helvetica, Arial, sans-serif; } 上面的代码指定，字体大小是页面默认大小的 100%，即16像素。 h1 { font-size: 1.5em; } 然后，hl的大小是默认大小的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&I入的MediaQuery模块。 它的意思就是，白动探测屏幕宽度，然后加载相应的 400px)"href="tinyScreen.css"/> 上面的代码意思是，如果屏幕宽度小于 400像素(max-device- width:400px)，就加载 tinyScreen.css文件。 如果屏幕宽度在400像素到600像素之间，则加载smallScreen.cs或件。 除了用html标签加载CS弦件，还可以在现有CS豉件中加载。 @import url("tinyScreen.css") screen and (max-device-width: 400px); 六. CSS勺@media规则同一个CS弦件中，也可以根据不同的屏幕分辨率， 选择应用不同的CSS®则。 @media screen and (max-device-width: 400px) ( .column ( float: none; width:auto; } #sidebar ( display:none; } } CSS5：件。 imgSizer.collate(imgs); }不过，有条件的话，最好还是根据不同大小的屏幕，力口 载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以 实现。
【编辑推荐】
移动设计初探：触屏网页设计
手机WEBKI间擎HTML元素定位和事例 移动网页设计的信息组织
本文来源：https://www.dywdw.cn/6adac32313661ed9ad51f01dc281e53a59025158.html
下载此文档
搜索文档
阅读：
文档下载
2022-07-15
