Don't step on the pit and don't look back. Before I used a large number of CSS3 Calc properties in a project. Don't be too cool when you write code ... But after the project was on the line, just let me collapse, the reason is very easy, in the version of Android 4.4 is lower than the mobile phone, the browser does not support this property.
Well, this is also sometimes the most pit daddy, in the domestic Cheetah browser and some other browsers, it may not be supported. All in all, this hole is on the big side. It doesn't matter, I can solve most of the common layout problems. But, here's the .... I'm a little puzzled by it. Just, it's okay, through my research, Finally still very quickly with the CSS to conquer.
Effects, such as:
Demand analysisLook at the picture, in fact very easy. Assuming the width is fixed, the layout is not too simple.
The problem is, the width of the device is not fixed, oh, then the problem is, when you do not know the detailed width, how to set its corresponding height?
That is, how to find a property with a height and width hook in the CSS. Just to have this parameter, the problem can be solved.
So, are there any of these parameters?
Yes, that's padding.
Code practicesUnder normal circumstances, it is not to think that padding has this characteristic. Just, remember, then this problem is solved, look at the code.
HTML structure<! DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="Width=device-width, Initial-scale=1,maximum-scale=1,user-scalable=no "></head><body> <div class="Box1"></div> <div class="Box2"></div> <div class="Box3"></div></body></html>*{margin: 0; padding: 0; }. Box1 {width: %; padding-bottom: %; float: left; background: #123; }. Box2 {width: %; padding-bottom: %; float: right; background: #234; }. Box3 {width: %; padding-bottom: %; float: right; background: #345; }For a common CSS reference, you can be very difficult to know some of the fun things inside, or see also a blind eye.
When we encounter some problems, especially the layout of such problems, we have to consider, can be used to solve the CSS, and occasionally one to consider JS. After all, JS is used to interact, and CSS is used for layout.
Fungleo original, reproduced please retain the version number of the Declaration, as well as the starting address: http://blog.csdn.net/fungleo/article/details/50811589
Pure CSS implements common layout on mobile--the secret of height and width hooks
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
