移动端布局的基本思路

移动端的布局，以多少为主，这个主要是看各个公司的规定而定，开始可以以750px宽度为准，为什么以750px宽度为准的话，这个我还一下子回答不出来，主要是2的倍数有关{个人见解或者是看别人的视频介绍}，第二移动端的布局方式，要么全屏，要么居中分布；

常规移动端设计（以商城为例）顶部一部分包括左边logo 中间部分搜索，右边要么是用户中心，要么是扫一扫。或者是导航按钮。

后面是幻灯片部分，其中包括项目部分（可以包括产品介绍，新闻信息等图标展示的部分，多数以三个或者是四个图标加文字显示，）；

然后是推荐信息比如公司新闻，或者是优惠活动的信息；展示的效果要么是上下滚动，要么是左右滚动；

后面的是产品分类，将产品分成一个模块展示出来，展示的形式要么全部是产品展示，要么是左边一个主要的产品名称，右边是一排的产品栏目展示出来。

最后面再来一个推荐产品或者是热门信息就可以了，底部加一点网站的相关信息，比如地址啊，联系信息啊，电话啊，备好信息就可以了，如果添加允许侧栏加一个返回顶部的按钮或者是联系方式的按钮就完美了，

如果是移动端，我认为不一定要加底部的菜单栏，如果需要就添加。一个简单的购物移动端的设计思路就可以了，

那企业网站又是如何呢，这个就要看你的电脑端设计是什么样子的，如果您的页面设计要自适应的结构方式，那您移动端的设计思路其实是和您电脑端设计的思路是一致的，只是显示的方式不一样，电脑端显示五个，我移动端显示三个就可以了，要有一种方式，电脑端是一种显示方式，移动端是另一种显示方式，只是内容显示部分是通用的而已，展示的结构不一样而已，那怎么排版就看设计师的思路，归根到底其实和电脑端的思路是一样的，只是显示的方式以移动端为准而已。

三种视口之间的关系

三种视口类型是人为的划分

序号	名称	描述
1	布局视口`Layout viewport`	设备无关, 通常默认`980px`,显示完整网页
2	视觉视口`visual viewport`	设备相关,用户手机屏幕可见部分,通过缩放查看全部
3	理想视口`idea viewport`	不必缩放就可查看全部,针对移动端进行布局

视口属性:<meta name="viewport" content="width=device-width, initial-scale=1.0" />

序号	属性值	描述
1	`width=device-width`	布局视图 = 视觉视图
2	`initial-scale=1.0`	视觉视图 = 理想视图

移动端布局单位很多,经典的百分比,em 等,但目前主流单位是: rem + vw,也称”rem-vw`解决方案

移动端布局的基本思路

移动端布局的基本思路

三种视口之间的关系

更多相关文章

随机推荐