分享人:徐炜
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.布局示例
6.扩展思考
7.参考文献
8.更多讨论
随着智能手机的普及以及社会的发展,传统的网站布局已经无法适应现状,我们编写的网页不仅仅要展示在电脑上, 也要展示在移动设备上,而移动设备种类繁多,苹果、小米、小灵通等等,各个手机的屏幕大小不一,一般的电脑端的页面布局在手机上无法完全适应,那么如何让一个页面匹配各个页面呢? 现在我们来看看下面的几种布局方式。
传统经典定宽高布局,定死宽高,是PC上常见布局方式。有固定的版型大小,例如320px,然后设置margin:0 auto;来居中,缺点是页面两边会出现空白。
.box{
width: 320px;
height: 650px;
margin: 0 auto;
background-color: #29b078;
color: white;
}
demo
流动布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同,流动布局就是使用百分比来代替px作为单位。 优点是流动布局可以很好解决自适应需求。缺点是不够灵活,添加元素时,需要更改其他元素的值。
.box1{
width: 38%;
float: left;
margin: 5%;
}
demo
bootstrap是一个比较流行的响应式前端框架,利用bootstrap的栅格系统可以实现响应式的移动端布局。
栅格系统:Bootstrap中定义了一套响应式的网格系统,其使用方式就是将一个容器划分成12列,然后通过col-xx-xx的类名控制每一列的占比,
在使用的时候,我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6,以此完成布局。
class="col-lg-2 col-md-3 col-sm-4 col-xs-6"
demo
使用媒体查询可以根据不同的设备宽度加载不同的css样式 rem是一个相对单位,会根据根节点的字体大小来计算的 使用媒体查询和rem可以实现移动端的响应式。
demoFlexbox是CSS3引入的新的布局模式,也称为弹性布局,他会根据页面的剩余宽度自动分配空间。 它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它能够扩展和收缩 flex 容器内的元素, 以最大限度地填充可用空间。Flexbox布局最适合应用程序的组件和小规模的布局,而网格布局更适合那些更大规模的布局。
demo移动端字体单位font-size选择px还是rem?
由于手机屏幕较小,且各种屏幕尺寸不同,会导致单位字体变化,显得格格不入。 移动端的字体选择。对于只需要适配手机设备,使用px即可。对于需要适配各种移动设备, 例如需要适配iPhone和iPad等分辨率差别比较挺大的设备,就要使用rem了,有时还需要配合媒体查询一起使用。
参考二:浅谈前端移动端页面开发(布局篇)
感谢大家观看
BY :叶紫阳|王姝丽|徐炜