当前位置：网站首页>Responsive layout a web page displays different effects on different devices) meta:vp

Responsive layout a web page displays different effects on different devices) meta:vp

2022-07-24 02:06:00 【（-^_^-）】

layout

Fixed width layout ：width: 12px;height: 13px;--------- Not suitable for different devices

Fluid layout ： Percentage setting width ---------------- Have elasticity , There will be dislocation

Responsive layout ------------ Information of detection equipment , The width of the equipment is different , The layout effect is better

A mixture of

Responsive layout

Media query （ Responsive layout is one of the ways ）

media query------------ When setting the layout of a web page, first check the size and width of the display device

----------------------------- Different style settings are displayed according to different display devices

viewport viewport ： Display the area of the web page - Different device viewports are different

  1. stay pc End ： Layout the viewport -width
  2. On mobile devices （ mobile phone ） Device visual viewport --device-width

Responsive layout conventions ：

         Visual viewport = Layout the viewport

         Not scalable

adopt By meta The label setting is completed Of

meta： The original data of the web page Can pass name Property to get different values , Complete the basic data settings of different web pages

width=device-width Unify the width of the layout viewport and the width of the device viewport

user-scalable=0//scala Zoom means Not scalable

initial-scale=1.0// Initial scaling =1 Indicates no scaling

maximum-scale=1.0

minimum-scale=1.0

Using shortcut keys ：meta:vp

The screen width of the device

Ultra small screen extra small <768px

Small screen small 768<= small<992

Middle screen medium  992<=medium <1200

screen large >=1200

According to different screen widths , Make media inquiries , Complete responsive layout  

min-width: Minimum page width

max-width: Maximum page width

min-height: Minimum page height

max-height:  Maximum page height

Be careful ：

  1. and There are spaces before and after Otherwise, it can't be resolved correctly
  2. The order of media query is from top to bottom （ Has a coverage effect -- In order to have a correct sequence effect , Let the screen size increase in turn Or decrease in turn ）
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Document</title>
	<style>
		body{
			background-color: black;
		}
		/*@media  Make media inquiries   screen What we judge is the size of the screen   Of course, there can be others */
		@media screen and (min-width: 768px){/* The minimum width is greater than 768 Pixels */
			body{
				background-color: pink;
			}
		}
		@media screen and (min-width: 992px){/* The minimum width is greater than 992 Pixels */
			body{
				background-color: green;
			}
		}
	</style>
</head>
<body>
	
</body>
</html>

 

 

 

 

Third party open source framework bootstrap-- Complete the corresponding layout

原网站

版权声明
本文为[（-^_^-）]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/205/202207240203535453.html

边栏推荐

猜你喜欢

随机推荐