自适应网页设计存在的问题 自适应〔网页〔制定〕〕存在的问题 在制定自适应网站页面时图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制。下面介绍自适应网页制定存在的问题，希望可以为您带来帮助。 1、将网页修改为百分比布局 当某个浏览窗口处于媒体查询固定的范围之外，网页就必须要水平滚动才能完整浏览，而通过百分比布局可以页面元素依据窗口大小在一个又一个媒体查询之间灵活修正样式，具体来讲，就是 css 代码不会指定具体像素宽度：width:xxx px;而是会指定一个百分比宽度：width:xx%;或者直接就是 width:auto;这里大家可以依据一个简易的公式将固定像素宽度转换成对应的百分比宽度：目标元素宽度 上下文元素宽度 = 百分比宽度 2、要阻止移动浏览器自动调整页面大小 iOS 和 Android 浏览器都基于 webkit 核心，这两种浏览器以及其他的很多浏览器都支持 viewport meta 元素覆盖默认的画布缩放设置，只必须在 HTML 的标签中插入一个标签，标签中可以设置具体的宽度(如像素值)或者缩放比例 2.0(设备实际尺寸的两倍)，下面是将一个页面扩大到设备实际尺寸两倍显示的 meta 标签示例: 3、用 CSS 如何控制网页中图片自适应大小 在制定自适应网站页面时图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用 CSS 控制图片使它自适应大小呢? 4、用 em 替换 px 目标元素宽度 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位，值得注意的是，现代浏览器的默认文字都是 16 像素，因此一开始给 body 标签应用以下任何一条规则所产生的效果都一样: 5、要主要流动布局(fluid grid)的使用 "流动布局'指的是各个区块的位置都浮动，不是固定不变的。 .main {float: right;width: 70%;} .leftBar {float: left;width: 25%;} 这么做的好处是，假如宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避开了水平滚动条的出现，大大提升了用户的阅读体验。另外，绝对定位(position:absolute)的使用，也要非常当心。 自适应网站制定的优缺点 二、自适应网站制定的优点 自适应网站制定可以在网页地址不变的状况下满足用户在不同设备上浏览访问的必须求，同时方便网站内容的〔管理〕与更新、针对搜索引...
