Webpage responsive media queries and webpage responsive media

Webpage responsive media queries and webpage responsive media

For the first time I wrote a blog, I also asked my predecessors to criticize and give me some advice. I would like to thank my predecessors and colleagues for their guidance!

The third day of work was just a shortest, and I received a PC-side live broadcasting room project. I also asked for a responsive project! I have not touched the front-end code for more than a year (I cannot mix up iOS). How can I solve this problem. For the first response, I only remember that the school had learned a percentage layout. Nothing else, such as content self-adaptation, font size, code redundancy, and post-maintenance. I started to talk about it first, and finally I made it. I was not ashamed to face my father in Jiangdong. Later I modified and scolded myself. SB was at that time... SB was at that time.

Let's talk about what I learned from the live broadcasting room.

1) media query @ media is a good thing. At least it is a good choice to make a response to a small front end just like me.

① Let's take a look at the standard format of the maximum width of the media query page

1 @media screen and (max-width: 960px){2    　    body{3         　　　background: #000000;4 　　　　　　　font-size:14px;5 　　　　　　　...6     }7 }

When the page width is smaller than 960px, use the following style sheet.

Note:ScreenIndicates that the device is notified to use the inlined body when printing the page.,The screen is also displayed in an unlined font. Will you print a webpage now? No! So at present, the website does not consider users to print website pages, so...ScreenYou do not need to write it.

　　　　

② This is the standard method for setting the minimum page width for media queries.

1 @media screen and (min-width:960px){2     　　body{3        　　　background:#000000;4 　　　　　　　font-size:14px;5 　　　　　　　...6     }7 }

When the page width is greater than 960px, use the following style sheet.

 

③ Of course, we can also query the width of a page by media,

1 @media screen and (min-width:960px) and (max-width:1200px){2 　　　body{3        　　　background:#000000;4 　　　　　　　font-size:14px;5 　　　　　　　...6     　　}7 }

The above Code indicates that when the page width is greater than 960px and smaller than pixel PX ([960px, pixel PX]), use the following style sheet.

　　

④ Other media query parameters

The preceding three media query features are less than, greater than, or equal to in the development process. In addition, she has other features. The following describes other parameters and usage of media query.

　　　　　　Width/height:The visible width (also called the viewport) of the browser/the visible height of the browser.

　　　　　　Device-width/device-height:Device screen width/device screen height.

Color: The number of digits of the color. (For example, min-color: 32 indicates whether the device has a 32-bit color.#000000)

Color-indeX: Check the color in the color table of the device index (the color value cannot be less than 0 ).

　　　　　　Orientation:Determine whether the current device is a landscape screen or a landscape screen.

Aspect-ratio: Check the ratio of the visible width and height of the browser. (Now the aspect ratio is 16: 9, which is the best. For example, for a live video window, the aspect ratio is 16: 9)

　　　　　　Device-aspect-ratio: Ratio of the width and height of the device.

Resolution: Detects the resolution of the screen or printer. (For example, min-resolution: 300dpi or min-resolution: 118 dpcm ).

Grid: Checks whether the output device is a grid device or a bitmap device.

Monochrome: Detects the number of bits in each pixel in the monochrome swap buffer area. (This is rarely used)

 

　　2) Limitations of media queries"

The limitation I want to talk about is that it cannot be used in IE8 or earlier, and IE8 or earlier will not be used. At present, it should be scolded by the front-end for being hard-working, under IE8, neither HTML5 nor CSS3 media queries are supported. How can this problem be solved... IE8 and below give up the calculation, but some companies, there are not many users, you have to ask your small front-end to Respond to IE8 or below, but fortunately you can import Respond in the project. js. In this way, media queries using CSS3 are useful for this Respond. js, Xiaosheng has never been used in real time. I am idle here to share a piece of knowledge about this Respond. js usage of the article to everyone: https://www.zhihu.com/question/21634225

　　

　　3) Implementing responsive web pages, more than media queries in CSS3 can do

1. Bootstrap:

I am afraid of using these frameworks, because all the labels in the Framework have styles and you can reference them, saving development time. For me, it is a little difficult to grasp. After I finish my mobile website, I regret using it. I would like to say that whatever it is, the most Nice website will be written.

　　　　

2. JS listens to the changes in the width of the view to dynamically change the CSS style sheet to achieve the best response:

This method should be used by many siege lions because it is accurate and friendly for code redundancy and later maintenance. You need to know, siege lions generally emphasize user experience.

And so on...