粤嵌教育
gzyueqian
13352868059

粤嵌Python培训 移动端页面四大适配方式

更新时间: 2018-04-23 15:22:40来源: 粤嵌教育浏览量:2511

      前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?粤嵌Python培训为大家总结了四种适配方式:

  一、流体布局

  所谓的流体布局,就是用百分比来定义宽度,外层容器的宽度设置为,就可以适配不同的屏幕,子元素按照比例来设置百分比,子元素整体的百分比之和就是,但是如果有子元素设置了边框,或者padding,那么整体的宽度就会大于,这时,我们可以将盒子的尺寸计算方式设置为从边框计算,通过设置:box-sizing:border-box,此时,盒子设置的宽度就是盒子的实际宽度,就没有这个问题了。


Python培训


       宽度解决了,高度如何设置呢?一般的元素,高度可以固定不变,所以在屏幕变化时,我们可以看到元素的宽度变了,高度不变,但是对于图片,如果高度不同,图片就会被拉扁,此时我们可以将图片的宽度设为;它的宽度就由它的父级的宽度决定,图片的高度不设置,图片就会按照宽度变化等比例放大或缩小,这是图片的特性,这样就可以做到图片的适配了。

  二、响应式布局

      响应式布局,就是使用媒体查询的方式,针对不同的屏幕,对应不同的样式,但是移动端的屏幕很多种,如果要对应这么多套不同的样式,这样做也不现实,所以针对移动端,Python开发培训可以划分出三个屏幕宽度范围,在范围之内的,就使用同一套样式,这样定义三套样式就可以了。

  三、弹性盒子布局模型

      弹性盒子布局模型是一个新增的CSS 布局模块,它带有流体布局和响应式布局的一些特性,而且它用少量的属性可以实现了多个元素的对齐方式,分布以及顺序等问题,用它能快捷高效的实现适配多终端的布局,这种模块简称为 flexbox,flexbox布局模块的先后有三个版本,前两个版本的一些属性在的浏览器上已经得不到支持了,第三个版本在的浏览器上已得到广泛的支持。

  四、基于rem的布局

  rem是CSS3新增的一个单位,相对于em单位,rem的单位设置更加简单,它是相对于根元素的的字体大小,其他的元素如果用rem来设置单位,它们对应的基准就是一样的,这样,在移动端适配中,除了html元素,其他元素的宽、高、行高、背景定位等等都用rem来设置,我们设定一个宽度作为基准,比如320px,然后按照这个基准,按比例来调节不同屏幕上对应的html元素的字体大小,就可以同步改变其他所有元素的用rem设置的尺寸的大小,这样就可以做到真正的按比例适配,不像流体布局,只能改变宽度,这种方式直接,高效,目前广泛应用在移动端布局中。

  以上就是移动端页面四大适配方式,如想了解更有Python内容,欢迎到粤嵌教育进行Python培训,有专业的老师指导,让你在学习的过程中少走很多的弯路。




免费预约试听课

推荐阅读