这里是修真院前端小课堂，每篇分享文从
【移动端有哪些常见的布局方式？ 】
​
大家好，我是IT修真院北京分院25期的学员，一枚正直纯洁善良的web前端程序员
今天给大家分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见的布局方式？
1.背景介绍
随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上，也要展示在移动设备上，而移动设备种类繁多，一般的电脑端的页面布局在手机上无法完全适应，所以在手机端上我们要重新布局。
2.知识剖析
2.1固定布局
固定布局是第一次做移动端时最好的选择方式,思路沿用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， 既简单、效率又高。
第五：Pc端的交互是鼠标，键盘的交互而移动端变成了触摸，手势的交互
5.编码实战
6.扩展思考
手机端软件界面设计中的几种常用布局样式
网址
7.参考文献
参考一：前端：移动端和PC端的区别
参考二：移动端布局浅谈
8.更多讨论
你们觉得响应式好呢，还是手机和PC端分开来写？
网址
9.鸣谢
感谢大家观看
BY :王姝丽

由于智能手机的普及，越来越多的人在手机上购物，工作和浏览网页。尽管传统的PC站也可以在手机上访问，但是体验非常糟糕，响应式网站的出现帮助解决了这一问题。当前的大多数网站案例都是响应式的，响应式网站非常适合用户的浏览和使用习惯，适用范围广。以下是北京网站建设公司东浩联创的小编给大家整理的的常见响应网站的布局。
常见的响应式网站布局有哪些？
1，背景图片+简单的多栏布局
背景大图和简单的多列布局是常见的布局形式。一方面，背景图像可以充分吸引用户的注意力并激发用户的兴趣。另一方面，多列布局以简洁明了的方式显示了次要元素，进一步使用户渴望点击和浏览。此外，使用此布局模式的网站不仅看起来干净，令人耳目一新，具有很强的视觉表现力，而且还突破了断点的限制，无论设备屏幕大小如何，都能为用户显示足够的内容。供用户浏览和探索，做到真正的响应。
2，单页单列布局
如果您没有太多内容，或者只想制作主题页面，那么近年来热门的单页式设计非常适合您。顾名思义，它非常适合显示极简的内容。单页设计最适合小型网站或小型项目。它可以使简介页面更简洁，也可以使简单信息更加突出和重要。
北京网站建设公司—东浩联创
3，不规则栅格
不规则的栅格布局可以显示大量内容，而不会造成冗余和繁琐。它具有规律性和可预测性，并且用户可以更快地获得所需的信息。此外，自定义栅格非常自由，网站管理员可以根据自己的需要安排网格，并且布局也是独一无二的。自定义栅格布局可能是设计师作品中最常见的布局，并且不同的设计师通常对网格系统有不同的理解和使用。
4，经典的F风格布局
研究表明，用户在浏览Web时习惯于沿F式阅读。这意味着用户喜欢从左到右阅读，然后向下移动并继续从左到右阅读。与此F风格阅读模式相对应的Web布局是F风格布局，最关键的信息沿字母F的形状放置。这迎合了用户的阅读习惯，使用户易于与网站交互。
5，简约分层
精简主义是一种非常流行的设计风格。精简主义为网站提供了足够的留白，可以使网站的重点更加突出。在极其简化的页面上添加几层可以使信息更有层次。使访问者在浏览时拥有更轻松的氛围。
文章出自:北京网站制作公司-东浩联创 http://www.donhonet.net 转载请注明出处

 大家好，我是IT修真院深圳分院第九期的学员徐炜，一枚正直、纯洁、善良的前端程序员。
 今天给大家分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见布局方式？
 1.背景介绍
 随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等，各个手机的屏幕大小不一，一般的电脑端的页面布局在手机上无法完全适应，那么如何让一个页面匹配各个页面呢？ 现在我们来看看下面的几种布局方式。
 2.知识剖析
 1>.固定布局
 固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两 边会有空白。
 演示demo
 2>.流动布局
 流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同，流动布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活，添加元素时，需要更改其他元素的值。
 演示demo
 3>.bootstrap布局
 bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比， 在使用的时候，我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。
 演示demo
 4>.媒体查询+REM布局
 使用媒体查询可以根据不同的设备宽度加载不同的css样式。rem是一个相对单位，会根据根节点的字体大小来计算的，使用媒体查询和rem可以实现移动端的响应式。
 演示demo
 5>.flex布局
 Flexbox是CSS3引入的新的布局模式，也称为弹性布局，他会根据页面的剩余宽度自动分配空间。 它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它能够扩展和收缩 flex 容器内的元素， 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。
 演示demo
 3.常见问题
 移动端字体单位font-size选择px还是rem?
 4.解决方案
 由于手机屏幕较小，且各种屏幕尺寸不同，会导致单位字体变化，显得格格不入。 移动端的字体选择。对于只需要适配手机设备，使用px即可。对于需要适配各种移动设备， 例如需要适配iPhone和iPad等分辨率差别比较挺大的设备，就要使用rem了，有时还需要配合媒体查询一起使用。
       
  5.编码实战
  见dome里。
  6.扩展思考
  移动端和PC端的区别？
 （1）PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
 （2）在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。 
 （3）在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。
 （4）在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。
 （5）一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。
 （6）比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，所以可以使用hammer-time.js来移除这300ms的延迟。
  7.参考文献
  参考一： 移动Web开发中的常见布局方式及一些常见问题
  参考二：浅谈前端移动端页面开发（布局篇）
  参考三：10分钟学会基本的 Flexbox 布局
  8.更多讨论
 （1）如何模拟按钮的hover效果？
 （2）如何在移动端禁止用户选中内容？
 （3）如何解决移动端click屏幕产生200-300ms的延迟响应问题？
  PPT 视频链接

  感谢叶紫阳师兄和王姝丽学姐，此教程是在他们之前技术分享的基础上完善而成。 
  今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

    
网站导航是每个网站中最重要的组成部分，网站导航可以告知用户网站整体内容有哪些，能够为用户提供些什么，直接引导用户快速获得自己想要的信息。一个有吸 引力的导航能够引导用户浏览更多的网站内容，增加用户在网站网站中的停留时间。在进行网站建设的过程中，网站导航设计都有哪些方法，常见的网站导航又是怎 么布局和体现的呢？　　
 
　　一、网站底部横向导航　　
　　最常见的网站导航，符合用户浏览习惯，用户进入网站之后，可第一眼看到网站导航的位置，一般位于网站的头部部分，且占用整个网站的空间，这种导航适用 于网站栏目在8-10个左右的网站。也是用户浏览网站最常见的导航，可方便告知用户网站分为哪些板块。在导航上面加入下拉菜单，可增加网站于用户的互动 性，也可支持更多的网站链接，用户可不用滚动滚动条即可直接进入网站任何一个栏目界面。　　
 
　　二、HTML5抽屉式导航　　
　　此类导航多见于手机网站，由于手机屏幕大小的限制，大多手机网站能够更大范围展示给用户产品信息，会把网站导航设计为抽屉式导航。默认情况下是不直接 显示导航的，需要用户点击某个按钮，才会动态的显示出导航。抽屉式导航一般以竖向排列，位于网站的左侧或右侧，也可根据需求加入横向二级菜单，可在有限的 屏幕内最大范围为用户随时提供最全的有效连接，不必用户来回滚动屏幕去寻找其他栏目的入口。　　
 
　　三、固定式侧边导航　　
　　固定式侧边导航不仅可以给人一种耳目一新的感觉，也会给用户一种明亮干净的网站布局，由于用户习惯使用横向导航，当网站采用侧边导航的时候，能够很好 的抓用用户眼球，加之鼠标滑动效果，可更加激起用户的点击欲。侧边导航有足够的空间表现自己的引导作用，大量的留白可使用户感觉整个网站具有呼吸之处，采 用优美的设计，可更加引起用户注意。　　
 
　　各式各样的网站导航，都会根据网站自身的需求而定，网站的定位决定于网站采用什么类型的导航更加合适，任何网站导航最主要的目的都是为了引导用户，告 知用户网站是做什么的，是网站的一个整合体，是为用户提供方便的。我们建设网站应该一切以为用户体验为第一，不能单纯为了导航的好看，而影响了用户体验， 比如以前使用的flash导航，用户体验度方面就非常差（安装flash插件、容易崩溃、加载慢、造成电脑卡）。
 

转载于:https://www.cnblogs.com/wuyoublog/p/4646521.html