死亡是一座永恒的灯塔

0%

如何进行自适应网页设计?

什么是自适应网页设计

“自适应网页设计”的概念,什么是自适应网页设计,即可以自动识别屏幕宽度、并做出相应调整的网页设计。

如何实现自适应网页设计

  1. 允许网页宽度自动调整:在网页代码的头部加入一行viewport元标签,宽度为设备宽度,缩放比例为一。
  2. 不使用绝对宽度:可以使用百分比宽度,视窗宽度等,或者width:auto;
  3. 使用相对大小的字体:em、rem
  4. 流动布局:各个区块的位置是浮动的,不是固定不变的
  5. 图片自适应:图片自动缩放 img { max-width: 100%;}
  6. 选择加载css:自适应网页设计”的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
  7. css中的@media媒体查询规则:同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

参考资料

自适应网页设计

坚持技术分享,您的支持将鼓励我继续创作!