media query 的用法

<%@ 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属性,不做任何操作

 

 

 

 

 

 

 

 

   

 

 

你可能感兴趣的:(query)