移动端屏幕自适应布局
生活随笔
收集整理的這篇文章主要介紹了
移动端屏幕自适应布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、技術點
移動端自適應采用百分比布局比較適合。需要說明一點的是：height的百分比是以父元素的寬度計算的，由于移動端父元素寬度有時沒有給定值（如父元素寬度為100%），此時子元素的height就為0。
因此子元素的高度值使用padding-top或者padding-bottom撐起。
同時height的高度設置為0，防止font-size或line-height等屬性影響到height。
2、示例
示例為展示圖片，每行展示3個圖片。每列圖片寬度33%，圖片間距為0.5%。
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"><meta name="author" content="Tencent-TGideas" /><meta name="Copyright" content="Tencent" /><title>實例-圖片列表</title><style>* {margin: 0;padding: 0;}ol,ul {list-style: none;}html,body {position: relative;width: 100%;}h1 {font-size: 14px;text-align: center;line-height: 70px;}.lists {width: 100%;}.lists li {position: relative;float: left;width: 33%;/*高度設置為0*/height: 0;/*padding-bottom設置為33% 以撐起高度*/padding: 0 0 33%;margin-top: .5%}.lists li:nth-child(3n-1) {/*圖片間距*/margin: .5% .5% 0;}.lists li a,.lists li img {width: 100%;height: 100%;}.lists li a {position: absolute;top: 0;left: 0;}</style></head><body><h1>圖片列表</h1><ul class="lists"><li><a href="javascript:alert('圖片');"><img src="img/sqbg-icon.png" alt="圖片"></a></li><li><a href="javascript:alert('圖片');"><img src="img/sqbg-icon.png" alt="圖片"></a></li><li><a href="javascript:alert('圖片');"><img src="img/sqbg-icon.png" alt="圖片"></a></li><li><a href="javascript:alert('圖片');"><img src="img/sqbg-icon.png" alt="圖片"></a></li><li><a href="javascript:alert('圖片');"><img src="img/sqbg-icon.png" alt="圖片"></a></li><li><a href="javascript:alert('圖片');"><img src="img/sqbg-icon.png" alt="圖片"></a></li><li><a href="javascript:alert('圖片');"><img src="img/sqbg-icon.png" alt="圖片"></a></li><li><a href="javascript:alert('圖片');"><img src="img/sqbg-icon.png" alt="圖片"></a></li></ul></body></html>效果：
?
總結
以上是生活随笔為你收集整理的移动端屏幕自适应布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设计模式NO.2
- 下一篇： RobotFramework自动化测试环