【CSS】设置移动端的CSS——响应式布局

响应式布局

出现背景：比如，篇幅很长的文章在手机端预览时，会出现很长的横向滚动条。
基本定义：为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之，就是一个网站能够兼容多个终端。
根本宗旨：写一次代码，跑在一万种设备上
核心思想：不就是设置宽度么？

实现方式：根据不同设备，设置不同CSS样式，设置该设备支持的页面宽（高）。

viewport

另外，在此之前，我们需要在head里设置一个meta标签，viewport，来设置移动端自适应

ViewPort详细信息，可参考此处：浅谈meta viewport

附上代码

Html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--
			设置viewport 声明内容为width为设备宽度，device-width；原始缩放比例1.0
		-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>响应式布局</title>
		
		<!--
			当设备最大宽度大于320px时，不再使用 mobile.css的样式
			即：设备宽度在320px以内时，使用移动端样式，mobile样式
		-->
		<link rel="stylesheet" href="css/common.css" media="(min-width:500px)"/>
		<link rel="stylesheet" href="css/mobile.css" media="(max-width:500px)"/>
	</head>
	<body>
		<div>
			<p>
			响应式布局
			基本定义：为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之，就是一个网站能够兼容多个终端。
			根本宗旨：写一次代码，跑在一万种设备上
			核心思想：不就是设置宽度么？
			
			实现方式：根据不同设备，引用不同CSS样式，设置支持的宽。
			</p>
		</div>
	</body>
</html>

common.css：

body{
	font-style:italic ;
}
div{
color: Green;
}
p{
	padding: 5px;
}

mobile.css：

body{
	font-style:normal;
	color: red;
}
p{
	padding: 20px;
}

以上两种css代码只是做测试用：在浏览器中F12后，改变页面宽度，来看看效果。宽度分别大于500px：

小于500px：

【CSS】设置移动端的CSS——响应式布局

响应式布局

viewport

猜你喜欢