Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use media query to write different css styles". The content is simple and easy to understand, and the organization is clear. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn this article "how to use media query to write different css styles".

Responsive web practice summary has introduced some knowledge points, here is not much introduction; here we come to understand how to use media queries to write different CSS styles; for responsive web design development, using media queries to adapt to different mobile phone screen styles development, we need to write different styles, for this we will share my personal experience in developing responsive web pages; For the current mobile phone, there are 320, 360, 384, 400 independent pixels, and iPhone 6 + is 414 independent pixels, so we only need to match these current types.

There are separate methods for different phones

For mobile phone independent pixels are 360~399 screen width

/*

* But margin font size, etc. or install 360px to calculate

*/

@media(min-width:360px)and(max-width:399px){}

For mobile phone independent pixels are between 320 and 359

/*min-width:320px

* css of 320px for device independent pixels

* Between min-width:320 and max-width:359

*/

@media(min-width:320px)and(max-width:359px){}

For styles with device-independent pixels above 400px.

/*

* 400px for device independent pixels, margins, etc. are calculated as 400px

*/

@media(min-width:400px)and(max-width:450px){}

css for device-specific pixels 640px~999px

/*min-width:640px

* css of 640px for device independent pixels

* Between min-width:640 and max-width:999

* margins, etc. are calculated at 640px

*/

@media(min-width:640px)and(max-width:999px){}

But on the PC side, in order to adapt to the PC side, we also do a display process for widths above 1000.

/* Minimum width 1000 style

* In order to adapt to the PC side, the PC side is designed with 1000px by default.

*/

@mediascreenand(min-width:1000px){}

The above is "how to use media query to write different css style" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.