Browsers have different sizes on different devices, and even on the same device, users will change the browser size. We hope the layout can better adapt to the Browser display area size, CSS device adaptation can be used for testing on ie10.
First, the simplest HTML code
<!DOCTYPE html>Running result on ie10
When the screen is 1360 wide
When the screen is 1220
The layout has changed as the browser size changes. Now we add CSS device adaptation, a new feature of css3.
The CSS code is as follows:
<style> @media screen and (min-width: 1350px) { @-ms-viewport { width: 1360px; } .bigTiles { width: 691px; height: 336px; float: left; } .smallTiles { width: 159px; height: 159px; float: left; } .middleTiles { width: 336px; height: 336px; float: left; } } @media screen and (min-width: 1000px) and (max-width: 1349px) { @-ms-viewport { width: 1000px; } .bigTiles { width: 691px; height: 336px; float: left; } .smallTiles { width: 99px; height: 99px; float: left; } .middleTiles { width: 159px; height: 159px; float: left; } } </style>We have adapted two types of screens: 1349px width and 1000px-1349px width. Now we use ie10 for testing.
In the 1360 width
In the 1220 width
The color block size is changed, so the layout is not changed.
The features of CSS device adaptation are very useful in layout. We have not changed the layout style, but there are still some situations, we can discard non-important content Blocks Based on different screen sizes. We recommend that you use this solution in the new layout.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
