当前位置：网站首页>Responsive - media query

Responsive - media query

2022-07-04 06:41:00 【HHppGo】

Last one bilibili Summary of problems on the page ：

Element display level ：

Standard flow < float < location
Standard flow The element of is on the page At the bottom
location The element of is on the page At the top

Be careful ：header Fixed positioning , At the top ;

The reason for the penetration effect , Because header No background color is set

Locate the display level of the element ：

The positioned elements are displayed at the same level
however ,HTML The level of positioning elements written in the back is higher than that in the front
Can be in The style of the previous element Add z-index: 1; Make it higher than the later （ As long as the number is greater than 0 that will do ）

Media query - Basic grammar

Insert picture description here

Code ：

<!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, initial-scale=1.0">
	<title>Document</title>
	<style> /*  Viewport width is less than or equal to 768px,  The background color of the web page is pink  */ @media (max-width: 768px) {
       body {
       background-color: pink; } } /*  Viewport width is greater than or equal to 1200px,  The background color of the web page is skyblue */ @media (min-width: 1200px) {
       body {
       background-color: skyblue; } } </style>
</head>

<body>

</body>

</html>

Media query - Writing order

Insert picture description here

Code ：

<!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, initial-scale=1.0">
	<title>Document</title>
	<style> /*  Viewport width  >= 768px, The background color of the web page is   Pink   Viewport width  >= 992px, The background color of the web page is   green   Viewport width  >= 1200px, The background color of the web page is  skyblue */ /*  Tips :  Code specification  mid-width:  From small to capital  max-width:  From large to small  */ /*  The code is not standardized , Girlfriend two lines of tears ~~（ It needs to be changed Bug, No time to accompany ） */ @media (min-width: 768px) {
       body {
       background-color: pink; } } @media (min-width: 992px) {
       body {
       background-color: green; } } @media (min-width: 1200px) {
       body {
       background-color: skyblue; } } </style>
</head>

<body>

</body>

</html>

Media query -link introduce

one.css It's about >=992px The style of
two.css It's about >=1200px The style of

<!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, initial-scale=1.0">
	<title>Document</title>
	<!--  Viewport width  >= 992px, The background color of the web page is pink  one.css-->
	<link rel="stylesheet" href="./one.css" media="(min-width:992px)">
	<!--  Viewport width  >= 1200px, The background color of the web page is green  two.css-->
	<link rel="stylesheet" href="./two.css" media="(min-width:1200px)">


</head>

<body>

</body>

</html>

Media query - hide

<!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, initial-scale=1.0">
	<title>Document</title>
	<style> * {
       margin: 0; padding: 0; } .box {
       /* 1.flex Layout  */ display: flex; width: 100%; } .left {
       width: 300px; min-height: 500px; background-color: pink; } .main {
       /* 2. Elastic expansion ratio :  Guarantee left have 300px Width  */ flex: 1; min-height: 500px; background-color: skyblue; } /* 3.  Viewport width  <= 992px, hide  .left */ @media (max-width:992px) {
       .left {
       display: none; } } /* visibility: hidden;  Hidden elements ： Space occupying and hiding （ Hidden elements still occupy positions ） display：none;  Hidden elements ： Non occupying hiding （ frequently-used ） */ </style>
</head>

<body>
	<div class="box">
		<div class="left">left</div>
		<div class="main">
			 Responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive Responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive Responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect responsive web page effect 
		</div>
	</div>
</body>

</html>