五种常见的网页布局

1.自适应布局 

特点:页面窗口发生变化时,网页元素宽度和字体大小不变,元素位置会变化

方案:为不同的屏幕分辨率(屏幕宽度为1200,1920)定义布局,相同的类名指定不同样式代码(媒体查询),bootstrap的栅栏系统和导航栏的变化

2.响应式布局

特点:页面窗口发生变化时,网页的元素和字体大小和位置都开始发生变化

方案:为不同的屏幕分辨率(屏幕宽度为1200,1920)定义布局,相同的类名指定不同样式代码(媒体查询),引入流式布局+弹性布局

3.流式布局

特点:页面窗口发生变化时,网页的元素宽度会变化而布局时不变

方案:%来设置每个区域的宽度,高度按px固定设计

4.弹性布局

特点:页面窗口发生变化时,网页的字体大小会变化

方案:字体大小按rem/em

5.静态布局

特点:网页的元素和字体大小都固定px,屏幕缩小时宽度出现滚动条

 

    原文作者:老弟在学习中
    原文地址: https://blog.csdn.net/qq_41245647/article/details/103203929
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞