写网页已有一段时间,竟不知网页的布局,网页都写完了,才开始学习网页的布局,目前已经看来很多博客。了解到了网页有五种布局:静态布局、自适应布局、流式布局、响应式布局、弹性布局。而我恰好使用了静态布局,我感觉这也是情理之中的事。我的元素大多使用px为单位,写起来易上手,简单。静态布局的特点就是居中布局,所有样式使用绝对宽度/高度(px)。缺点就是不能根据用户的屏幕尺寸做出不同的表现。
接下来说说流式布局:流式布局的特点就是使用%百分比定义宽度,高度大都用px来固定。这样的用处就i是网页可以适应各种分辨率的屏幕当然缺点显而易见,当屏幕过大或过小,网页里使用px定义的元素会变形,这时就需要用min-width或max-width来预防。
自适应布局:自适应布局就是多个静态布局的集合,网页根据屏幕分辨率匹配对应的静态布局
响应式布局(Responsive Layout):
个人比较喜欢响应式布局,很高级的布局,响应式设计的目标是确保一个页面在所有终端上都能显示出相对应的效果。响应式布局结合了流式布局和弹性布局,再搭配媒体查询技术,缺点就是要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本,不同的屏幕太多了。
最后说说弹性布局(flex布局):
1.使用弹性布局的元素的浮动和对齐失效
2.使用 em 或 rem 单位进行相对布局,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,网页具有易用性,1em=16px,1rem=10px。