移动端适配方案总结

最新推荐文章于 2024-06-15 15:51:59 发布

Z_hao_nan

最新推荐文章于 2024-06-15 15:51:59 发布

阅读量431

点赞数 1

CC 4.0 BY-SA版权

文章标签：移动端开发流式布局响应式布局 rem布局

本文链接：https://blog.youkuaiyun.com/Z_hao_nan/article/details/87786643

本文总结了移动端常见的三种适配方案：流式布局、响应式布局和REM布局。流式布局借助浏览器自适应宽度实现自适应效果；响应式布局通过媒体查询针对不同设备执行相应CSS；REM布局则通过HTML的font-size作为基准，动态调整页面样式大小。各种布局策略相互结合，共同解决了移动端设备的显示适配问题。

对于移动端设备，通常就是解决不同设备的显示问题，总结常见布局的优缺点

流式布局
响应式布局
rem适配

在移动端的设备，需要进行视口的设置(类似于浏览器-包含一个视口-包含我们看到的页面dom)，要最先解读到css属性所以一般放在头部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
	</head>

	....

</html>

其中width,视口的宽度自动跟随设备调整，
inital-scale是初始化缩放级别，用户看到的和在pc端的是1:1的关系，（不会因为整体缩小，而导致字体过小无法看到）
user-scalable是用户是否可以自动缩放 1 yes 或者 0 no

流式布局

流式布局的原理就是利用width:100%已达到解决响应式的问题，在这种设计基础上，一定要注意

使用边框盒子（防止溢出）box-sizing: border-box
宽度尽量使用width: 100%

比较简单，使用浏览器自适应宽度，达到自适应的效果，要注意由于使用border-box所以在设置的时候，要尽量设置爱元素的padding,防止元素溢出

双飞翼布局
两栏布局

有一款插件，是为了解决局部元素的滑动，可以使用iscroll.js,当其元素有超出的长度的时候，可以在局部进行滑动，iscroll,局部滑动

响应式布局

响应式布局主要通过媒体查询来判断当前容器的宽度之类，在执行相应的css代码

css媒体查询 @media screen and (max-width: 768px) 最大宽度为768px时执行的代码

css代码

*{
	margin: 0;
	padding: 0;
}
.contain{
	width: 1000px;
	height: 1000px;
	margin: 0 auto;
	background: pink;
}

@media screen and (max-width: 768px) and (min-width: 320px){
	.contain{
		width: 100%;
		background: blue;
	}
}

@media screen and (max-width: 992px) and (min-width: 768px){
	.contain{
		width: 750px;
		background: green;
	}
}

@media screen and (max-width: 1200px) and (min-width: 992px){
	.contain{
		width: 970px;
		background: red;
	}	
}

@media screen and (min-width: 1200px){
	.contain{
		width: 1200px;
		background: yellow;
	}	
}

html代码

<body>
	<!--
		媒体查询
		使用css关键字 @media screen and (<这里接条件>)
		通过查询不同的屏幕尺寸 做不同的相应（css 优先级）
		
		需求
		超小屏幕 768px		宽度100%		背景色   蓝色
		小屏设备768px-992px	宽度750px	背景色	绿色
		中屏设备992px-1200px	宽度970px	背景色	红色
		大屏设备	1200px		宽度1170px	背景色	黄色
		
		宽度要小于最小界限 保证显示不出现滚动条
	-->
	<div class="contain"></div>
</body>

最终的效果为

大屏设备 1200px 宽度1170px 背景色黄色
中屏设备992px-1200px 宽度970px 背景色红色
小屏设备768px-992px 宽度750px 背景色绿色
超小屏幕 768px 宽度100% 背景色蓝色

其中著名的框架有 bootstrap

rem适配

rem适配主要通过:html中的style中font-size从而判断出整体的页面布局样式大小，从而达到自适应。
也就是在html头部统一定义了基准大小，所有尺寸按照基准大小设置，如果更改了设备，只需要动态更改基准大小，从而就能达到整个页面的自适应效果

em是以父元素为基准，rem是以根元素root(也就是<html></html>),

这里有一个换算，当前基准尺寸 = （当前设备宽度/设计稿设备宽度）* 设计稿基准尺寸

使用不同屏幕下的基准值动态的去设置html中的font-size这个基准值

假设当前设计稿 width:750px font-size:100px


// 动态设配基准值的css
@meadia (min-width: 750px){
	html{
		font-size:100px;		//	(750/750)*100
	}
}
@meadia (min-width: 640px){
	html{
		font-size:85.33333px;	//	(640/750)*100
	}
}
@meadia (min-width: 414px){
	html{
		font-size:55.2px;		//	(414/750)*100
	}
}
@meadia (min-width: 320px){
	html{
		font-size:42.7px;		//	(320/750)*100
	}
}


// 样式的css代码
span{
	font-size: 0.2rem;		// 设计稿中是20px 基准值是100px 相对为 20/100 rem, 
}

div{
	width: 100%;			// 设计稿中是100%的宽度
	height: 0.5rem;			// 设计稿中是50px 基准值是100px 相对为 50/100 rem		
}


/*
* 如果是到了其他设备 比如414px的设备  则在原有代码的情况下
* 之前的设计稿 0.2rem = 0.2 * 100 = 20px
* 就会变为0.2rem = 0.2 * 55.2 = 11.4px
* 也就达到了适配的目的,等比例缩放的效果。
*/

在这里使用less编写，可以达到自动计算所有的适配屏的css代码的编写

@charset "UTF-8";


/*variable.less*/

// 适配设备的集合
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
// 设计稿尺寸
@psdWidth:750px;
// 预设基准值
@baseFontSize:100px;
// 主流设备的个数
@len:length(@adapterDeviceList);


/*adapter.less*/
// 1.适配不同宽度的基准，利用递归函数实现循环 
// 2.由于这里是min-width，考虑到css从上到下读取，应该使用min-width:320,414,640,750这种顺序

.adapterMixin(@index) when(@index > 0){
    @media (min-width: extract(@adapterDeviceList, @index)){
        html{
            font-size: extract(@adapterDeviceList, @index) / @psdWidth * @baseFontSize;
        }
    }
    .adapterMixin(@index - 1);
} 

// 函数的使用
.adapterMixin(@len);


/*样式的less代码，由于less有计算功能，就比较方便*/
//@baseFontSize; 为之前定义过的基准font-size

span{
	font-size: 20rem/@baseFontSize;	//设计稿是20px  直接就是20 rem / 100 = 0.2rem
}

div{
	width: 100%;					// 设计稿中是100%的宽度
	height: 50rem/@baseFontSize;	// 	设计稿是50px  直接就是50 rem / 100 = 0.5rem
}