五种常见的网页布局

1.自适应布局 

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

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

2.响应式布局

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

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

3.流式布局

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

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

4.弹性布局

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

方案:字体大小按rem/em

5.静态布局

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

 


版权声明:本文为qq_41245647原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。