media query 的用法

最新推荐文章于 2024-05-31 23:10:37 发布

原创最新推荐文章于 2024-05-31 23:10:37 发布 · 345 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#php #javascript #java #ViewUI

jquery 同时被 3 个专栏收录

46 篇文章

订阅专栏

html

43 篇文章

订阅专栏

32 篇文章

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="enrollment.css" rel="stylesheet" type="text/css">
<title>onBoarding</title>
</head>
<body>
   <div class="endual_div">
   
   abcdefghijklmn
   
   </div>
</body>
</html>

CSS 文件

.endual_div{
	height:40px;
	color:blue;
	
	font-size:40px;
}

@media only screen and (max-width: 480px) {  

     .endual_div{
	height:40px;
	color:red;
	
}

}

1. @media only screen and (max-width: 480px) {} 放在css文件的后面，如上面的代码

2. 公用的属性，如果值是一样的，那么写在外面的css上，这么和media里面的css是公用的

我认为 @media css的执行过程是这样的：

首先加载@media外面的CSS，然后判断width，如果width符合条件，加载@media里面的CSS

1.将原来没有的CSS属性，media里面有的CSS属性加载

2.将原来有的CSS属性，media里面也有CSS属性覆盖

3.将原来有的CSS属性，media里面没有的CSS属性，不做任何操作