Web开发之Layout布局

本文详细介绍了Web开发中的五种布局方式:静态布局、自适应布局、流式布局、响应式布局和伸缩布局。针对不同场景,如只做PC端、移动端或兼顾PC和移动,提出了相应的布局选择建议。静态布局适用于固定宽度的PC网站,自适应布局利用@media媒体查询创建多套静态布局,流式布局通过百分比调整宽度,响应式布局结合流式和自适应,伸缩布局则利用rem/em实现相对布局。
摘要由CSDN通过智能技术生成

布局种类:

页面布局的几种方式(静态化布局、流式布局、自适应布局、响应式布局、弹性布局)

使用建议:

1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

一、静态布局(static layout)

传统Web设计,网页上的所有元素的尺寸一律使用px作为单位

1、布局特点

不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。
常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话:

1、如果小于这个宽度就会出现滚动条
2、如果大于这个宽度则内容居中外加背景,这种设计常见于pc端

https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=zh-cn

2、设计方法

PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;

移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.根据浏览器用户代理,识别移动端,并重定向。

PC端自适应设计详情参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘半仙回来了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值