1.在固定布局方法头中，添加meta name=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=0 '，然后根据设计草图设置相应的宽度。其他地方类似于pc。

优点：采用了pc的思想，上手更快。缺点：大屏幕手机显示的网页更宽，而固定版面宽度的参考永远是固定宽度(设计稿的大小)，造成左右两边空白。当手机水平显示时，两边的边距更亮。2.以流量布置法的适用百分比为单位。优点：可以更好的适应各种屏幕分辨率的手机。缺点是不够灵活。添加元素时，需要更改其他元素的值。3.浮动布局方法float clearfix(清除浮动)

优点：这是一种传统的浮动方式，编写简单，实现工整。缺点：对浮动元素要求严格，布局不灵活。4.定位布局方法在布局中非常常见，通过使用四个位置(上/左/右/下)的特定值来相互配合，很容易实现。优点：实现简单。在移动终端中，定位非常常见，尤其是弹出。

缺点移动终端频繁使用定位会导致一些莫名其妙的bugsios上固定输入有bug，使用固定布局的元素会被抛出。在安卓手机上，当输入框获得焦点时，键盘将被通风，被定位的元素将被提升到手机键盘的顶部。5.混合布局法所谓混合布局，就是将所学的知识灵活地运用到布局中。比如：rem百分比(flow layout) flex rem等优点在布局上比较灵活，结合其他布局的优点来满足自己的布局要求。缺点代码有点繁琐；不一致的代码使维护变得困难。6.flex布局方法也称为灵活布局。

这是最简单的flex布局。其实灵活布局有很多简单、高效、实用的属性，对于移动布局非常方便。优点：自适应性好，灵活性强，目前广泛应用于移动终端。缺点是需要写很多兼容的代码。7.rem布局方法rem由根元素改编，网页中的根元素是指html。我们可以通过设置html的字体大小来控制rem的大小。有两种自适应方法：1.rem @media(通过媒体查询设置html的字号值，实现自适应)

8.响应式布局方法使用@media (media query)来设置页面在不同屏幕宽度下的适应性和响应性(根据不同的屏幕大小，页面布局和样式会相应地进行调整)。典型案例(bootStrap官网)的优势不仅在不同的屏幕下具有适应性，还可以在相应的屏幕下调整页面布局和风格，实现更多的用户体验。兼容各种设备的缺点是工作量大，效率低；代码繁琐，会有隐藏的无用元素，加载时间过长；一定程度上改变了网站原有的布局结构，用户会感到困惑；增加UI和开发的工作量。