发表于: 2019-07-13 22:17:20

1 975


今天完成的事:

完成了任务12,准备了小课堂。

明天计划的事:

做任务13,讲margin负值在页面布局中有哪些应用的小课堂。

遇到的问题:

暂无

收获:

移动端有哪些常见布局方式?

1固定布局

固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。


2流体布局

流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,看到百分比,你应该想到,这将提供了很强的可塑性和流动性。换句话说,通过设置了百分比,你将不需要考虑设备尺寸或者屏幕宽度大小了,结论就是,你可以为每种情形找到一种可行的方案,因为你的设计尺寸将适应所有的设备尺寸。


3FLEX布局

flex也称为弹性布局,他会根据页面的剩余宽度自动分配空间。

4栅格布局

bootstrap是一个比较流行的响应式前端框架,利用bootstrap的栅格系统可以实现响应式的移动端布局。




返回列表 返回列表
评论

    分享到