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

首页技术文章正文

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

更新时间:2017-12-07 来源:黑马程序员 浏览量:

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

一、流体布局

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

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

流体布局的伪代码如下:

Python移动端

二、响应式布局

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

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

Python移动端

三、弹性盒子布局模型

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

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

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

Python移动端

四、基于rem的布局

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

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

Python移动端

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

Python移动端

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


本文版权归黑马程序员人工智能+Python学院所有,欢迎转载,转载请注明作者出处。谢谢!


作者:黑马程序员人工智能+Python培训学院


首发:http://python.itheima.com/


javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

14天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

8天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

0天免费试学

基础班入门课程限时免费

申请试学名额

12天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

10天免费试学

基础班入门课程限时免费

申请试学名额
在线咨询 我要报名