如何网页制作布局,新手必须掌握的五种布局方法

如何网页制作布局,新手必须掌握的五种布局方法,第1张

如何网页制作布局新手必须掌握的五种布局方法

一、静态布局设计:布局元素居中布局,设置width固定宽度。



二、流式布局设计:布局元素宽度使用百分比并使用min-width或max-width限制,高度使用vw并使用min-height或max-height限制使布局元素长宽比一致。


内容元素使用百分比。


使整体布局一致。


流式布局代表:栅格系统。



三、自适应布局设计:使用媒体查询在不同断点适用不同静态布局。



四、响应式布局设计:自适应和流式布局的结合,响应式布局的代表:bootstrap。



五、d性布局和rem/em布局设计:d性布局使用flex。


rem/em布局使用rem调整各元素尺寸和文字大小,以上以750的设计稿,1rem = 100px,适用于移动端的页面。


总结:对于需要移动端和pc端的网站,可以使用window.navigator.userAgent,判断访问平台,跳转移动端的站点或pc端的站点。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/624618.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-15
下一篇 2022-04-15

发表评论

登录后才能评论

评论列表(0条)

保存