2024年黑马程序员Python教程移动端面适配四大方式-豆柴文库

您所在位置：网站首页 / 2024年黑马程序员Python教程移动端面适配四大方式.doc / 文档详情

免费试读已结束，剩余 1 页请下载文档后查看

10 金币

下载文档

/ 6

下载提示

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

文本预览

移动端页面适配四大方式

前端在制作移动端页面时，会遇到适配各种手机屏幕的问题，并且还包括平板电脑，这么多个辨别率的屏幕，怎样做到适配呢？本文总结了四种方式。

流体布局
所谓的流体布局，就是用百分比来定义宽度，最外层容器的宽度设置为100%，就能够适配不一样的屏幕，子元素按照百分比来设置百分比，子元素整体的百分比之和就是100%，不过假如有子元素设置了边框，或者padding，那么整体的宽度就会不小于100%，这时，我们能够将盒子的尺寸计算方式设置为从边框计算，通过设置：box-sizing:border-box，此时，盒子设置的宽度就是盒子的实际宽度，就没有这个问题了。
宽度处理了，高度怎样设置呢？一般的元素，高度能够固定不变，因此在屏幕变化时，我们能够看到元素的宽度变了，高度不变，不过对于图片，假如高度不一样，图片就会被拉扁，此时我们能够将图片的宽度设为100%；它的宽度就由它的父级的宽度决定，图片的高度不设置，图片就会按照宽度变化等百分比放大或缩小，这是图片的特性，这么就能够做到图片的适配了。
流体布局的伪代码如下：
*{box-sizing:border-box}
.wrap{overflow:hidden}
.banner{overflow:hidden}
.bannerimg{width:100%}

.l_con{width:33.333333%;height:50px;float:left;}
.c_con{width:33.333333%;height:50px;float:left;}
.r_con{width:33.333333%;height:50px;float:left;}



响应式布局
响应式布局，就是使用媒体查询的方式，针对不一样的屏幕，对应不一样的样式，不过移动端的屏幕诸多个，假如要对应这么多套不一样的样式，这么做也不现实，因此针对移动端，能够划分出三个屏幕宽度范围，在范围之内的，就使用同一套样式，这么定义三套样式就能够了，宽度的区间能够参考苹果手机的辨别率：374px如下为第一个区间，375px到413px为第二个区间，414px以上为第三个区间，按照这个三个区间定义三套样式，在苹果手机上能够做到很好的适配，但对于某些其他辨别率的手机，也许会有某些不太适配的细节，不过这三套，应当基本上是合用了。
响应式布局的伪代码如下：
//最小尺寸样式
……

//不小于等于375px尺寸样式
@mediascreenand(min-width:375px){
……
}

//不小于等于414px尺寸样式
@mediascreenand(min-width:414px){
……
}



弹性盒子布局模型
弹性盒子布局模型是一个新增的CSS布局模块，它带有流体布局和响应式布局的某些特性，并且它用少许的属性能够实现了多个元素的对齐方式，分布以及次序等问题，用它能快捷高效的实现适配多终端的布局，这种模块简称为flexbox，flexbox布局模块的先后有三个版本，前两个版本的某些属性在最新的浏览器上已经得不到支持了，第三个版本在最新的浏览器上已得到广泛的支持。
Flexbox布局模块是CSS3新增的某些属性，这些属性分为容器属性和条目属性，容器和条目是这种模块里面的概念，指的其实就是父元素和子元素。父元素通过设置display:flex来申明flexbox模块、通过flex-flow来设置子元素排列方式、通过justify-content来设置元素的分布方式等等。而子元素通过flex属性来设置伸长或缩小百分比、通过order来设置它在容器中的次序等等。
.menu{
			max-width:800px;
			height:40px;
			margin:0auto;
			display:flex;
			justify-content:flex-start;
			align-items:center;
		}
		.menuli{
			flex:1;
		}

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

四、基于rem的布局
rem是CSS3新增的一个单位，相对于em单位，rem的单位设置愈加简单，它是相对于<html>根元素的的字体大小，其他的元素假如用rem来设置单位，它们对应的基准就是同样的，这么，在移动端适配中，除了html元素，其他元素的宽、高、行高、背景定位等等都用rem来设置，我们设定一个宽度作为基准，例如320px，然后按照这个基准，按百分比来调整不一样屏幕上对应的html元素的字体大小，就能够同时变化其他所有元素的用rem设置的尺寸的大小，这么就能够做到真正的按百分比适配，不像流体布局，只能变化宽度，这种方式直接，高效，目前广泛应用在移动端布局中。
动态变化html标签文字大小的J