移动端流式布局

赤蓝紫

发布于 2023-01-02 06:51:48

46500

代码可运行

文章被收录于专栏：clzclz

运行总次数：0

代码可运行

1. meta 视口标签

<meta name="viewport" content="width=device-width, user-scalable = no, initial-scale=1.0, maximum-scale = 1.0, minimum-scale = 1.0">

width=device-width //设置页面宽度等于设备物理宽度

user-scalable = no // 用户是否可以缩放，可以是yes或no, 1或0

initial-scale=1.0, maximum-scale = 1.0, minimum-scale = 1.0 //依次是初始缩放比、最大缩放比、最小缩放比

2. 二倍图

当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。

原理： Retina（视网膜屏幕）是一种显示技术可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

对于一张 50px * 50px 的图片，在手机 Retina 屏中打开按照原本的物理像素比会放大倍速这样会造成图片模糊通过使用二倍图，提高图片质量解决在高清设备中的模糊问题。 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width">
	<title>Myself</title>
	<style>
		img:nth-child(2) {
			width: 50px;
			/*移动设备中的图片会被放大， 所以先将二倍图压缩成原图大小，从而可以提高清晰度*/
			height: 50px;
		}
	</style>
</head>

<body>
	<img src="images/apple50.jpg" alt="">
</body>

</html>

效果图：

3. 流式布局

流式布局是一种等比例缩放布局方式，在 CSS 代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将 CSS 固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, user-scalable = no, initial-scale=1.0">
	<title>Myself</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		section {
			width: 100%;
			/* max-width: 980px;
			min-width: 600px; */       /*根据需要还可以设置max-width， min-width */
			margin: 0 auto;
		}

		section div {
			float: left;
			width: 50%;
			height: 400px;
		}

		section div:nth-child(1) {
			background-color: pink;
		}

		section div:nth-child(2) {
			background-color: purple;
		}
	</style>
</head>

<body>
	<section>
		<div></div>
		<div></div>
	</section>
</body>

</html>

效果图：

PC端

移动端

4. 特殊样式

示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, user-scalable = no, initial-scale=1.0">
	<title>Myself</title>
	<style>

	</style>
</head>

<body>
	<a href="#">Test</a>
	<input type="button" value="按钮">
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, user-scalable = no, initial-scale=1.0">
	<title>Myself</title>
	<style>
		a {
			-webkit-tap-highlight-color: transparent;
			/*移动端点击链接会高亮， 设置为透明色*/
		}

		input {
			-webkit-appearance: none;
			/*消除默认样式*/
		}
	</style>
</head>

<body>
	<a href="#">Test</a>
	<input type="button" value="按钮">
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-11-01，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

1 条评论

热度