The company bookcase has the book "Responsive Web Design: HTML5 and CSS3 in Practice". I probably read the first few chapters carefully, and most of the following chapters introduce CSS3 (you can just find this manual if you want to use it) ! )
"Responsive Web Design: HTML5 and CSS3 in Practice"
Mobile-first cross-terminal Web Tmall front end @Xu Kai-Guidao W3CTECH 2013 http://luics.com/ demo/cew-w3ctech-1311/#/
Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, it is A website can be compatible with multiple terminals instead of making a specific version for each terminal. This concept was born to solve mobile Internet browsing.
Responsive layout can provide a more comfortable interface and better user experience for users on different terminals. With the current popularity of large-screen mobile devices, it is not an exaggeration to describe it as a general trend. As more and more designers adopt this technology, we are not only seeing a lot of innovation, but also seeing some established patterns.
Advantages and disadvantagesAdvantages:
Strong flexibility in the face of different resolution equipment
can quickly solve multiple equipment display adaptation problems
🎜>Disadvantages:
Compatible with various devices, heavy workload, low efficiency
Cumbersome code, hidden useless elements, longer loading time
In fact, this is a Compromise design solutions are affected by many factors and cannot achieve the best results
It changes the original layout structure of the website to a certain extent, which may cause user confusion
According to Identify different widths, css3 media, font rem. Zoom in according to the root element, avoid css sprite buttons, etc., otherwise use image scaling to set up
Level A must be compatible. To put it simply, it is more common to be at least compatible with these three resolutions: 480 768 1024. Now there is 1280 1960 and other levels need to be considered (4k and so on still need media to select
media ie8-6 does not support it. You can use the respond command to get its support, but it is not necessary (it will be given to him below ie8) Use the default css, don’t be too friendly, if it must be compatible, consider using Response.js
Content first
is the second idea of responsiveness, let the main content It is displayed first, and the corresponding minor modules are displayed later.
Just look at my blog for examples! (I will talk about it after the revision)
1200-1920 (fixed 1200). ) (The main desktop level has not yet been considered for 4k devices)
1200-1024 (fixed 1000) (old PCs and tablets) (ie6-8 does not support responsiveness and defaults to this width , however I personally don’t want to do things that are too old)
768 (768-1000) (width 99%) (I really don’t like full screen)
The above is only compatible. There is no mention of content priority. Guests are a little slow. Now serve.
480-768 corresponding to the left and right modules. It would seem too compact together, and the subject content should be prioritized for mobile devices, so the article list is at the top and the date announcement is placed at the bottom of the list (actually the idea is that simple)
Simple responsive layout
Change color according to width
. 3;
width:98% ;
margin: 0 auto;
}
@media screen and (max-width:1024px){
.content{
color: orange;
border: 1px solid orange;
width:95%;
}
}
@media screen and (max-width: 768px){
.content{
color: red;
border: 1px solid red;
width:98%;
}
}
@media screen and (max-width: 480px){
.content{
color: green;
border: 1px solid green;
width: 95%;
}
}
?width: Viewport width.
? height: Viewport height.
? device-width: The width of the rendering surface (for us, the width of the device screen).
? device-height: The height of the rendering surface (for us, this is the height of the device screen).
? Orientation: Check whether the device is in landscape or portrait orientation.
? aspect-ratio: Aspect ratio based on viewport width and height. A 16:9 ratio display screen can be defined as aspect-ratio: 16/9.
? device-aspect-ratio: Similar to aspect-ratio, based on the aspect ratio of the width and height of the device rendering plane.
? color: The number of digits for each color. For example, min-color: 16 will detect whether the device has 16-bit color.
? color-index: The number of colors in the device’s color index table. Value must be a non-negative integer.
?monochrome: Detects the number of bits per pixel used in a monochrome framebuffer. The value must be a non-negative integer, such as monochrome: 2.
? resolution: Used to detect the resolution of the screen or printer, such as min-resolution: 300dpi. Measurements of pixels per centimeter are also accepted, such as min-resolution: 118dpcm.
? scan: The scanning method of the TV, the value can be set to progressive (progressive scan) or interlace (interlaced scan). For example, a 720p HD TV (the p in 720p indicates progressive scanning) matches scan: progressive, and a 1080i HD TV (the i in 1080i indicates interlaced scanning) matches scan: interlace.
? grid: Used to detect whether the output device is a grid device or a bitmap device. In all of the above features, except scan and grid, you can use the min and max prefixes to create a query range. For example, analyze the code snippet shown below:
? @import url("phone.css") screen and (min-width:200px) and (max-width:360px); Here width is applied min and max to set the query range. This way the phone.css file will only include display devices with a viewport width between 200 pixels and 360 pixels.
According to the above, you can first write a media-free css for some low-end browsers to read, probably 1024 level users, and then use media to overwrite and rewrite other resolutions.
Insert
viewport visual
initial-scale initialization factor 2.0 is the magnification factor
width screen width
initial-scale initial scaling. That is, the initial zoom level of the page. This is a floating point value that is a multiplier of the page size. For example, if you set the initial scaling to "1.0", then the web page will be displayed at 1:1 of the target density resolution when displayed. If you set it to "2.0", then the page will be enlarged to 2 times.
maximum-scale Maximum zoom. That is, the maximum zoom allowed. This is also a floating point value indicating the maximum multiplier of the page size compared to the screen size. For example, if you set this value to "2.0", then the page can be enlarged up to 2 times compared to the target size.
user-scalable User-adjustable scaling. That is, whether the user can change the zoom level of the page. If set to yes, the user is allowed to change it, otherwise it is no. The default value is yes. If you set it to no, both minimum-scale and maximum-scale will be ignored, since scaling is not possible at all.
There is also minimum-scale minimum zoom factor
Web application runs in full screen mode content ="yes|no" Default no
Web application status bar (top bar of the screen) style
content ="default|blank|black-transparent|blank-translucent "
default: Default display blank: black black-transparent: black transparent blank-translucent: black translucent
Identifies the phone number on the page. content="telephone=yes|no"
Disable link highlighting (mainly ie and Safari highlights when a hyperlink is touched)
Formula: Target Width Pixels/Context Width Pixels=Percentage Simply put, the layout is the width of the target element/the width of the parent element and the percentage is obtained; the corresponding font can also be applied to the formula, which is the calculation method of the percentage of the main font (pixels are the pixels of the design) The percentage of the outermost layer, body, is 90%-100% based on perception Because it is calculated based on the parent element Layout width conversion & lt; div style = "width: 960px" & gt; & lt; div style = "width: 940px" & gt; & lt;/div & gt;/div & gt; to 940/9 according to the formula to 60 =0.9791666666666667
Font width conversion
em to replace px, now there is also a new rem tag,
em is scaled according to the parent element, Multiple scaling
Convert to 48/16=3
rem is scaled according to the root element
Conversion is very easy to calculate (I also recommend it. It is not supported under ie8. The writing method is compatible with writing px first and then writing rem. Coverage 48/10=4.8
body
to achieve a good user experience The server also provides Adaptive image selection to load the corresponding image The image storage address asset bkg folder image will not shrink, but the specific folder image will be scaled
Grid system
There are many grid systems that can be quickly built. The most responsive frameworks are to use these
Responsive video
FitVids
PS: There are still some devices that are not compatible yet, In fact, responsiveness is to support more devices on one page, which is more conducive to SEO. However, the effects pursued by desktop devices are quite different from those of mobile devices. This may be the shortcoming of responsiveness.
You can take a look at the homepage of Taobao, Tencent and Baidu. They all have dedicated mobile page pad pages (after all, the effect and performance will be better), but their activity page and game page will not make other pages for this purpose. The pages on the terminal are mainly directly responsive.
You can also add that you can try the corresponding 2k 4k screen to test Taobao, Tencent and Baidu homepage.
I found that they are not very good; there are still some 'pits' Need to fill in slowly
Please keep the source address for reprinting, thank you
Ranking of the top ten digital currency exchanges
The difference and connection between java and javascript
How to create html with webstorm
Computer application areas
fil currency price real-time price
Data storage encryption methods
How to write triangle in css
Which laptop battery testing software is best?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
