CSS Responsive web Development

The following CSS content is loaded when the maximum screen width of the device is less than 1024px

@media screen and (max-width:1024px) {
body{
width:1024px;
}
#main {
Background-image:url (img/bg1.jpg);
}
}

All represents all types of devices

@media all and (max-width:1024px) {
body{
width:1024px;
}
#main {
Background-image:url (img/bg1.jpg);
}
}

Shorthand

@media and (max-width:1024px) {
body{
width:1024px;
}
#main {
Background-image:url (img/bg1.jpg);
}
}

Operations can be performed using and, or, not

Determines whether the orientation is vertical

@media and (max-width:1024px) and (orientation:portrait) {
body{
width:1024px;
}
#main {
Background-image:url (img/bg1.jpg);
}
}

<body>

<div id= "Main" >

</div>

</body>

Record it and leave it for later, also convenient for others.

Contact me:[email protected]

2016.7.25

11:38

CSS Responsive web Development