CSS web page responsive layout to automatically adapt to PC/Pad/Phone devices
|
Preface There are many devices nowadays, including PC, iPad, mobile phone, smart watch and smart TV. If there is no responsive layout, then the computer web page will be displayed on a mobile phone or iPad, the experience will be very poor, the operation will be inconvenient, and the visual fatigue will occur. Therefore, we must have a responsive layout when developing web pages. index
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div id="header">Header</div>
<div id="left">Left side</div>
<div id="center">Middle</div>
<div id="right">Right side</div>
<div id="footer">Bottom</div>
</div>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
}
/*Adapt to PC width greater than 1000px*/
@media screen and (min-width: 1000px) {
#content{
width: 960px;
margin:0 auto;
}
#header{
width: 100%;
line-height: 100px;
float: left;
background: #333;
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
#left{
width: 200px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-right: 10px;
}
#center{
width: 540px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
}
#right{
width: 200px;
line-height: 400px;
text-align: center;
background: #333;
float: right;
font-size: 30px;
color: #fff;
}
#footer{
width: 960px;
height: 200px;
background: #333;
color: #fff;
line-height: 200px;
font-size: 30px;
text-align: center;
float: left;
margin-top: 10px;
}
}
/*Adapt to pad width between 640-1000*/
@media screen and (min-width: 640px) and (max-width: 1000px) {
#content{
width: 600px;
margin:0 auto;
}
#header{
width: 100%;
line-height: 100px;
float: left;
background: #333;
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
#left{
width: 200px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-right: 10px;
}
#center{
width: 390px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
}
#right{
width: 600px;
line-height: 300px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-top: 10px;
}
#footer{
width: 600px;
height: 200px;
background: #333;
color: #fff;
line-height: 200px;
font-size: 30px;
text-align: center;
float: left;
margin-top: 10px;
}
}
/*Adapt to mobile terminal width less than 640*/
@media screen and (max-width: 639px) {
#content{
width: 400px;
margin:0 auto;
}
#header{
width: 100%;
line-height: 100px;
float: left;
background: #333;
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
#left{
width: 100%;
line-height: 150px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-bottom: 10px;
}
#center{
width: 100%;
line-height: 300px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
}
#right{
width: 100%;
line-height: 150px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-top: 10px;
}
#footer{
width: 100%;
height: 200px;
background: #333;
color: #fff;
line-height: 200px;
font-size: 30px;
text-align: center;
float: left;
margin-top: 10px;
}
}Use @media screen and (limited scope) to control the layout of the web page, for example min-width represents the minimum limit, and max-width represents the maximum limit. PC
Pad end
Phone
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: WeChat Mini Programs Implement Star Rating
>>: Font selection problem of copyright symbol in Html (how to make copyright symbol more beautiful)
Recommend
Javascript combined with Vue to achieve automatic path finding for any maze image
Table of contents Preface Two-dimensional array, ...
Why MySQL does not recommend using subqueries and joins
To do a paginated query: 1. For MySQL, it is not ...
Detailed introduction to nobody user and nologin in Unix/Linux system
What is the nobody user in Unix/Linux systems? 1....
Setting up VMware vSphere in VMware Workstation (Graphic Tutorial)
VMware vSphere is the industry's leading and ...
Uniapp's experience in developing small programs
1. Create a new UI project First of all, our UI i...
Beginners learn some HTML tags (1)
Beginners can learn HTML by understanding some HT...
How to add Nginx proxy configuration to allow only internal IP access
location / { index index.jsp; proxy_next_upstream...
HTML form value transfer example through get method
The google.html interface is as shown in the figur...
Detailed explanation of Linux file operation knowledge points
Related system calls for file operations create i...
Detailed explanation of MySQL and Spring's autocommit
1 MySQL autocommit settings MySQL automatically c...
Understand the use of CSS3's all attribute
1. Compatibility As shown below: The compatibilit...
Implementation example of specifying container ip when creating a container in docker
When Docker creates a container, it uses the brid...
Detailed explanation of JavaScript error capture
Table of contents 1. Basic usage and logic 2. Fea...
100-1% of the content on the website is navigation
Website, (100-1)% of the content is navigation 1....
Introduction to Computed Properties in Vue
Table of contents 1. What is a calculated propert...