随着智能手机的普及以及社会的发展,传统的网站布局已经无法适应现状,我们编写的网页不仅仅要展示在电脑上, 也要展示在移动设备上,而移动设备种类繁多,苹果、小米、三星等等很不好适配
移动端设备屏幕尺寸非常多,碎片化严重,Android和苹果设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等
一般的电脑端的页面布局在手机上无法完全适应,那么如何让一个页面匹配各个分辨率的页面呢?
那么首先现在移动端有两种适配方案:
一 .单独制作移动端页面(主流)也就是说,PC端和移动端为两套网站,pc端是pc断的样式,移动端在写一套,专门针对移动端适配的一套网站
移动端单独制作的常见布局方式:
流式布局(百分比布局)
flex 弹性布局(强烈推荐)
less+rem+媒体查询布局
混合布局
比如百度pc端和移动端的官网:
pc端一套代码样式
移动端一套代码样式
二 .响应式页面兼容移动端即pc和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配
响应式
媒体查询
bootstarp
比如三星的官网 , 用不同终端打开, 它会自动适配不同的样式 ,但是却是一套代码 ,但是由于响应式网站能够适应市场上所有主流终端,在开发中的测试量非常很大很麻烦,因此响应式布局不能在大型网站的前提下实现多终端自适应。所以大部分网站都不用它.
那么我们来看看他们有什么不同
流式布局:
流式布局,就是百分比布局,也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限 制,内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
下面是百分比布局(流式布局)的用法:
例如这样的三个盒子
第一个盒子占50%右边俩个各占25%
flex布局
flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活 性,任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性 将失效。
flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
采用 Flex 布局的元素,称为 Flex 容器(flex
container)
下面就是flex布局 ,弹性盒模型:
flexbu'j
给盒子添加flex属性,改变盒子模型
rem适配布局
1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当 前设备。
2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem 做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适 配。
技术方案:
1.rem+媒体查询
2.lflexible.js+rem
盒子样式字体随着屏幕宽度变化
运用rem和媒体查询自动适配不同屏幕
混合布局
至于混合布局就是在我们做网站项目的时候 ,可以根据不同的组件需求 ,做出相应的 布局方式 ,并不局限在哪一种 ,例如我们全局使用rem适配 ,部分盒子照样用flex布局 可以混用,并不影响.(同上rem里面运用了flex)
响应式布局容器
响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子 元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
父容器版心的尺寸划分
超小屏幕(手机,小于 768px):设置宽度为 100%
小屏幕(平板,大于等于 768px):设置宽度为 750px
中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
下面是通过媒体查询来展示不同屏下的响应式排列 ,当然实际网站很多时候都是通过bootstarp来做的
响应式就会根据屏幕大小排版
这些都是常见的H5移动端布局方式 ,实际运用中flex和rem都是非常实用的布局方式 ,那么今天就这些了
想要了解更多 ,请关注一下 ,一起交流学习
举报/反馈