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

时间 2019-12-06 标签移动哪些常见的布局方式

这里是修真院前端小课堂，每篇分享文从css

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】html

八个方面深度解析前端知识/技能，本篇分享的是：前端

【移动端有哪些常见的布局方式？】android

你们好，我是IT修真院北京分院25期的学员，一枚正直纯洁善良的web前端程序员ios

今天给你们分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见的布局方式？git

1.背景介绍程序员

随着智能手机的普及以及社会的发展，传统的网站布局已经没法适应现状，咱们编写的网页不只仅要展现在电脑上，也要展现在移动设备上，而移动设备种类繁多，通常的电脑端的页面布局在手机上没法彻底适应，因此在手机端上咱们要从新布局。github

2.知识剖析web

2.1固定布局bootstrap

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

demo

2.2流体布局

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

demo

2.3FLEX布局

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

2.4栅格布局

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

3.常见问题

移动端和PC端的区别

4.解决方案

第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，由于目前不论是android手机仍是ios手机，通常浏览器使用的都是webkit内核，因此说作移动端开发，更多考虑的应该是手机分辨率的适配，和不一样操做系统的略微差别化。

第二：在部分事件的处理上，移动端多出来的事件是触屏事件，而缺乏的是hover事件。另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的

第三：在移动端有不少网页是能够横屏看也能够竖屏看，而且不少屏幕的饿分辨率都是不同的，因此只要牵涉到移动端都要考虑用响应式布局

第四：在动画处理上，PC端因为要考虑IE的兼容性，因此一般使用JS作动画的通用性会更好一些，可是CSS3作了很大的牺牲，而在手机端，若是要作一些动画、特效等，第一选择是CSS3，既简单、效率又高。