31.我的页面自适应套路总结（上）

最新推荐文章于 2024-11-04 17:05:06 发布

endingCode

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量40

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44768421/article/details/134215741

版权

“点赞收藏加关注，你也能住大别墅。”

一、开发中面临的页面自适应问题及我的解决方案。

1、为什么要页面自适应？

如果没有自适应，除了糟糕的视觉体验和惨不忍睹的交互外，并没有什么其他的弊端。但是目前来说用户体验的好与坏已经能够决定一个应用的生死（微信、windows、安卓…除外）。

2、解决自适应问题的基本思路？

（1）PC和Phone之间用一套样式解决
（2）PC和Phone分别用两套样式，根据媒体查询来决定使用哪套样式，在同类设备中，通过flexible和rem来适配同类设备中不同尺寸的屏幕。(折叠屏这个怪物，我就先不管了)

3、我选的方案？

根据上节的字数就可以看出，我选择并推荐的方案是第二种。下面介绍的具体做法也是基于第二种方案。

二、web项目（我的做法）

案例：根据屏幕大小判断PC或者phone，从而引用不同的css文件
html代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>媒体查询实现引入不同资源案例</title>
		<link rel="stylesheet" href="css/phone.css" media="screen and (max-width: 999px)" />
		<link rel="stylesheet" href="css/pc.css" media="screen and (min-width: 1000px)" />
	</head>
	<body>
		max-width的意思是小于等于
		min-width的意思是大于等于
		如果屏幕宽度小于等于999px那么用phone.css
		如果屏幕宽度大于等于1000px那么用pc.css
		基本可以满足我在开发中的适配需求
	</body>
</html>