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
A brief analysis of the matching priority of Nginx configuration location
Preface The location in the server block in the N...
Markup Language - Title
Click here to return to the 123WORDPRESS.COM HTML ...
Detailed explanation of Nginx configuration parameters in Chinese (load balancing and reverse proxy)
PS: I've recently been reading the Nginx chap...
Basic usage of exists, in and any in MySQL
【1】exists Use a loop to query the external table ...
Javascript File and Blob Detailed Explanation
Table of contents File() grammar parameter Exampl...
Learn how to use JavaScript's new Element Traversal property to traverse child elements
Table of contents 1. ChildNodes attribute travers...
8 Reasons Why You Should Use Xfce Desktop Environment for Linux
For several reasons (including curiosity), I star...
MySQL merge and split by specified characters example tutorial
Preface Merging or splitting by specified charact...
How to use Docker to build a tomcat cluster using nginx (with pictures and text)
First, create a tomcat folder. To facilitate the ...
Nginx reverse proxy to go-fastdfs case explanation
background go-fastdfs is a distributed file syste...
Enter the style file for the automatic search suggestion function: suggestion.css
Copy code The code is as follows: .sugLayerDiv{ p...
CSS to achieve Cyberpunk 2077 style visual effects in a few steps
background Before starting the article, let’s bri...
Vue3+Element+Ts implements basic search reset and other functions of the form
After switching from Vue2's writing style to ...
vue_drf implements SMS verification code
Table of contents 1. Demand 1. Demand 2. SDK para...
Vue.js application performance optimization analysis + solution
Table of contents 1. Introduction 2. Why do we ne...