自适应界面学习文档（@media）

最新推荐文章于 2021-08-09 17:25:28 发布

不悔将来

最新推荐文章于 2021-08-09 17:25:28 发布

阅读量418

点赞数

分类专栏： html 文章标签： html 界面自适应

本文链接：https://blog.csdn.net/junjun56/article/details/48781513

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一直很羡慕那么可以自适应的web界面框架，总觉得很高大上，故而在百度搜了一下，跟着最简单的demo学习了一下，发现，结果还算满意。

下面是学习步骤

第一步：在html界面的title加入

<meta name="viewport" content="width=device-width, initial-scale=1.0">

，此段代码表示 meta可提供有关页面的元信息，如针对搜索引擎和更新频度的描述和关键词等。这是我们实现自适应的第一步

第二步：

@media screen and (max-width: 980px) {}

表示当界面宽度最大为980px时使用什么样式，也可以有多个and，表示多个条件，但要注意，由于语言都是自上而下执行，如果你定义了小于等于180后又定义小于等于980，则只会看到980的样式

第三步：

默认样式，即不是在这些条件中的样式，这个根据个人需求而定，而且，尽量不要使用px，可以使用百分比，字体使用em（1em=16px），表示相对大小，图片也使用百分比

这是我弄的一个简单的demo，只是看效果的，没有任何意义，但可以参考一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应学习</title>
<style type="text/css">

	body{
		font: 1em/150% Arial, Helvetica, sans-serif;
	}
	#mydiv1{
			width:98%;
			height:90%;
			margin:0px auto;
			background:#000000;
		}
	
	@media screen and (max-width: 980px) {
		#mydiv1{
			width:98%;
			height:90%;
			margin:0px auto;
			background:#00FF00;
		}
	}
		
	@media screen and (max-width: 480px) {
		#mydiv1{
			width:98%;
			height:90%;
			margin:0px auto;
			background:#FF0000;
		}
	}
	
	
	
</style>
</head>

<body>
	<div id="mydiv1">
		465
	</div>
</body>
</html>

不悔将来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自适应界面学习文档（@media）

一直很羡慕那么可以自适应的web界面框架，总觉得很高大上，故而在百度搜了一下，跟着最简单的demo学习了一下，发现，结果还算满意。下面是学习步骤第一步：在html界面的title加入，此段代码表示meta可提供有关页面的元信息，如针对搜索引擎和更新频度的描述和关键词等。这是我们实现自适应的第一步第二步：@media screen and (max-wid
复制链接

扫一扫