全国咨询/投诉热线:400-618-4000

Python移动端页面适配四大方式

更新时间:2017年11月30日16时42分 来源:传智播客 浏览次数:

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

一、流体布局

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

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

流体布局的伪代码如下:

响应式布局

二、响应式布局

响应式布局,就是使用媒体查询的方式,针对不同的屏幕,对应不同的样式,但是移动端的屏幕很多种,如果要对应这么多套不同的样式,这样做也不现实,所以针对移动端,可以划分出三个屏幕宽度范围,在范围之内的,就使用同一套样式,这样定义三套样式就可以了,宽度的区间可以参照苹果手机的分辨率:374px以下为第一个区间,375px到413px为第二个区间,414px以上为第三个区间,按照这个三个区间定义三套样式,在苹果手机上可以做到很好的适配,但对于一些其他分辨率的手机,可能会有一些不太适配的细节,但是这三套,应该基本上是适用了。

响应式布局的伪代码如下:

响应式布局

三、弹性盒子布局模型

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

Flexbox布局模块是CSS3新增的一些属性,这些属性分为容器属性和条目属性,容器和条目是这种模块里面的概念,指的其实就是父元素和子元素。父元素通过设置display:flex来声明flexbox模块、通过flex-flow来设置子元素排列方式、通过justify-content来设置元素的分布方式等等。而子元素通过flex属性来设置伸长或缩小比例、通过order来设置它在容器中的顺序等等。

弹性盒子布局模型特征伪代码如下:

响应式布局

四、基于rem的布局

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

动态改变html标签文字大小的JavaScript如下:

响应式布局

五、CSS样式设置伪代码如下:

响应式布局

以上就是四种移动端适配的方式,您可以根据项目的需要,选择适合的适配方式,或者是组合使用一两种方式在项目中,希望这篇文章对您在移动端布局中有所帮助。

本文版权归传智播客人工智能+Python学院所有,欢迎转载,转载请注明作者出处。谢谢!
作者:传智播客人工智能+Python学院

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校区

    14天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    8天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    0天免费试学

    基础班入门课程限时免费

    申请试学名额

    12天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    10天免费试学

    基础班入门课程限时免费

    申请试学名额