自适应网站设计的注意事项

  当某个浏览窗口处于媒体查询固定的范围之外，网页就需要水平滚动才能完整浏览，而经过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式，具体来讲，就是css代码不会指定具体像素宽度：width:xxxpx;而是会指定一个百分比宽度：width:xx%;或者直接就是width:auto;这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度：目标元素宽度÷ 上下文元素宽度 = 百分比宽度

  要阻止移动浏览器自动调整页面大小

  iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewport

  meta元素覆盖默认的画布缩放设置，只需在HTML的标签中插入一个标签，标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:

  用CSS如何控制网页中图片自适应大小

  在设计自适应网站页面时图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢?

  用em替换px

  目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位，值得注意的是，现代浏览器的默认文字都是16像素，因此一开始给body标签应用下列任何一条规则所产生的效果都一样:

  要主要流动布局(fluid grid)的使用

  “流动布局”指的是各个区块的位置都浮动，不是固定不变的。

  .main {float: right;width: 70%;}

  .leftBar {float: left;width: 25%;}

  这么做的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避免了水平滚动条的出现，大大提升了用户的阅读体验。另外，定位(position:absolute)的使用，也要非常小心。

尊重原创文章，转载请注明出处与链接：http://qdthjy.5zix.com/news/111400/ 违者必究！ 以上就是青岛天琥设计培训学校 小编为您整理自适应网站设计的注意事项的全部内容。

---

• ← 青岛天琥设计培训学校告诉你室内设计要素有哪些
• 青岛天琥教育告诉你网页制作的重要注意事项 →