The mobile end sets the font size according to the device size (understanding extension of the case)

1, the problem description:

Take a look at a previously written web page in your company and find something like this in CSS:

/* Device Vertical screen style */@media all and (orientation:portrait) {    video_bg{       &nbsp
;p osition:fixed;
        Z-index:-9999;
        width:100%;
        background: #469BD4;        }}//* Device horizontal screen style */@media all and (Orientation:landscape) {     . Video_bg{background: #A900B1         position:fixed;     
    right:0;
        bottom:0;
        Z-index:-9999;
        width:100%;
        height:100%;    } @media only screen and (min-width:320px) and (orientation:portrait) {    html{font-
size:100%;} @media only screen and (min-width:360px) and (orientation:p ortrait) {    html{font-size:125%}} @media only screens and (min-width:400px) and (orientation:

Portrait) {    html{font-size:150%;}}

@media only screens and (min-width:600px) and (orientation:portrait) {    html{font-size:200%;}} @media only max-width:768px and (orientation:portrait) {    .wrap{width:90%}} @media only SC  Reen and (min-width:480px) and (Orientation:landscape) {    html{font-size:100%}} @media only screens and (min-width:580px) and (Orientation:landscape) {    html{font-size:107%}} @media only screens and (Min-wi dth:730px) and (Orientation:landscape) {    html{font-size:130%}} @media only screens and (min-width : 900px) and (Orientation:landscape) {    html{font-size:175%}} @media only screens and (min-width:992px) {    html{font-size:200%;}}

No previous contact with the mobile front-end development, see this code entirely by guessing: the front two is the device on the screen to adapt (the note here can only be written in/**/), followed by the different screen size for adaptive.

Then, in my own development of each mobile front-end will also add this code, do not understand the result is that I am writing a product of the first page when finally encountered a big problem: the display for the inline-block of the other elements of the div can not be used Margin:auto function , and switch to different sizes of mobile phones or screens, the style will also be different (here I want to record Ah, the boss taught me a little common sense: in banner and footer, they in the case of the screen width should be fixed px, do not write a percentage, otherwise users are not good clicks, user experience is very important). At first I didn't think it was a font problem. Later, by constantly debugging, I think the font will have a certain effect, but not sure how much it affects, in this project, I all elements of the width and height are set to a percentage.

Vertical screen and horizontal screen situation, logo display, icon, "Mideo", "hot" and "Friends" center problem.
2, Knowledge points:

1, write mobile End page, commonly used font units are Rem,rem is the relative root element size unit.

Here's a good idea of why you should use REM units, although I've got the concept of px, EM, and rem in front of me (I can refer to my previous blog post), but obviously I haven't figured out what kind of unit to choose.

Here's a clear idea:

① physical pixels

②css pixels

③ device pixel ratio (DPR)

④ viewport: The definition of the viewport in CSS is the inclusion block of the (the width of block-level elements defaults to 100%).

On the desktop, the width of the viewport is equivalent to the width of the browser window, which is the height of the browser window. It would be inconvenient to do the same on a mobile device with a browser width that is usually 240px~640px. This shows the concept of layout viewport.

⑤ Layout viewport: Unlike desktop browsers, the default layout viewport width of the browser is completely independent of the browser width. Usually is the 768px~1024px, the most common is 980px (the default layout viewport height, each mobile phone browser is not fixed), and desktop browser layout viewport size is the size of the browser window (in fact, there is no desktop browser "Layout view" concept, "viewport" is the browser window).

Here's what you have to say:% of the units in my previous code, where it's easier to get mixed up,% is relative to the parent element, thankfully, here is the HTML tag, so there's no big problem. In fact, this is replaced by PX for the unit better.

I've always thought that the root element is 12px, but it's probably naïve to forgive me, although the CSS settings shown above are crossed out in the browser while reviewing the elements, but that doesn't mean they don't work. (In this case, my vertical screen uses the Galaxy S5, its screen size is 360*640), which has this setting:

@media only screen and (min-width:360px) and (orientation:portrait) {
    html{font-size:125%}
}

When I check it out and uncheck it, the page changes. In fact, the font size of the HTML here has become 15px. Change the code to the following:

/* Style on device vertical/@media all and (orientation:portrait) {}/* the device horizontal screen styles */@media all and (Orientation:landscape) {} @media only screens and (min-width:320px) and (orientation:portrait) {html{font-size:12px}} @media only screen and (min-width:360px) and (orientation:portrait) {html{font-size:15px}} @media only screens and (min-width:400px) and (or

ientation:portrait) {html{font-size:18px}}

@media only screen and (min-width:600px) and (orientation:portrait) {html{font-size:24px}} @media only screens and (max-width:768px) and (orientation:portrait) {} @media only screens and (min-width:480px) and (
    Orientation:landscape) {html{font-size:12px}} @media only screens and (min-width:580px) and (Orientation:landscape) {
HTML{FONT-SIZE:13PX}} @media only screens and (min-width:730px) and (Orientation:landscape) {html{font-size:16px}} @media only screens and ( min-width:900px) and (Orientation:landscape) {html{font-size:21px}} @media only and (min-width:992px) {html{font-size:24px;}} 

2, in the above used @media: is CSS3 in the media query.

You can write a media query expression that allows the browser to automatically pick a style in the style sheet and use it based on the current window size.

In CSS, media-related style definitions start with CSS 2.1. The various media types are defined in CSS 2.1, including displays, portable devices, televisions, and so on.

In CSS 3, the Media queries module is included, which allows you to add a medium query expression that specifies the media type, and then selects the style that should be used based on the media type. In other words, we can improve the user experience by allowing us to select a page layout in the style without changing the content to accurately adapt to different devices. So far, the media queries module has been supported by Firefox, Safari, Chrome browser, and Opera browser.

① in the iphone display:

The Safari browser used in the iphone 3GS and ipod Touch also provides support for CSS 3 media query expressions. The iphone's resolution is 320px * 480px, but it is not displayed according to the max-width:979px style. This is because the Safari browser used in the iphone displays the width of the window as a 980px when the page is displayed. Because most of the Web page is based on the width of the standard of about 800px, so Safari browser if the width of 980px to display, you can normally display the vast majority of the Web page. In this case, you can use the <meta> tag to specify in the page how many pixel windows the Safari browser will take to process this page:

	<meta name= "viewport" content= "width=600px" >

If you are ready to use a style in a small window on a page, and you may be open in the iphone or ipod Touch, don't forget to add the <meta> tab and write the specified window width in the tab.

How to use ②media queries:

	@media device type and (device attributes) {style code}

You must write "@media" at the beginning of the code, and then specify the device type or media type.

10 types of devices are defined in CSS 2.1

Value that can be specified	Device type
All	All devices
Screen	Computer monitor
Print	Print paper or Print preview view
Handheld	Portable Devices
Tv	Devices of the type of TV
Speech	Voice and audio synthesizer
Braille	Braille Tactile feedback equipment for the blind
Embossed	Braille Printer
Projection	Various projection equipment
Tty	Media using fixed density letter grids, such as telex typewriters and terminals

Device characteristics are written in a similar way to the style of writing, divided into two parts, which have a colon division, the colon before the device to write some of the characteristics of the colon after the specific value of the feature.

There are 13 device features in the CSS, and most of the device features have a specified value that accepts the Min/max prefix, which is used to indicate logic greater than or equal to or less than, to avoid using < and >.

Use the AND keyword to specify the style that is used when the value of an attribute of a device type satisfies a condition.

You can add the NOT keyword or the only keyword in an expression, and the NOT keyword represents a reverse operation on an expression that follows:

	/* Performs a reverse operation on the statement after not
	/@media not handheld and color {style code} @media all and
	(not color)

The only keyword is to hide the style in an expression from browsers that do not support media Queries but can read media type. For browsers that do not support media queries (such as browsers before IE8), this style will be ignored, regardless of whether they are available.

Finally, a reference to an external style sheet is supported in the Media Queries module in CSS 3:

	@import URL (color.css) screen and (min-width:1000px);
	<link rel= "stylesheet" type= "text/css" media= "screen and (min-width:1000px)" href= "Style.css" >

3. To align a display:inline-block div vertically in the parent element (of course, the child elements in the parent element are arranged only in one row):

	<div class= "Container" >
		<div class= "Child" > I want Center arrangement </div>
	</div>

		div{
			margin:0;
			padding:0
		}
		. container{
			border:1px solid red;
			width:200px;
			height:140px;
			Text-align:center
		}
		. container:before{
			content: ".";
			height:100%;
			Display:inline-block;
			Vertical-align:middle;
			Visibility:hidden
		}
		. child{
			Display:inline-block;
			Vertical-align:middle;
		}

Vertical-align:middle attribute needs reference, so use: before pseudo element to implement. This method is also used to implement the variable width of the child elements, so that the child elements are centered in the parent container.