Html5移動開發(2)rem使用和基本佈局
阿新 • • 發佈：2018-12-23
不同解析度下效果圖
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> <title></title> <style> /*考慮到練習,寫在一起比較好移動,真正做專案時還是要有單獨的樣式表*/ * { padding: 0rem; margin: 0rem; } html { /*谷歌瀏覽器寫62.5%會有一點相容問題..為了谷歌.改一下倍率吧.*/ font-size: 625%; font-family: "微軟雅黑"; } body { /*其實就當16px這麼用了.因為設定了625%直接減去兩位就可以按px方法做了*/ font-size: .16rem; } div { /*box-sizing:border-box;設定了邊框也沒有把DIV變大,太棒了~*/ box-sizing: border-box; } img { display: block; max-width: 100%; } #img1 { margin: 0 auto; width: 6.4rem; } .divleft { border: solid 0.01rem #808080; width: 50%; background-color: aliceblue; float: left; } .divright { width: 50%; border: solid 0.01rem #000000; background-color: antiquewhite; float: left; } .container { max-width: 6.4rem; margin: 0 auto; } footer { margin-top: 0.1rem; width: 100%; background-color: #eee; } .clear { clear: both; } </style> </head> <body> <div class="container"> <header> <span>在於有關的和我人燈光,類似因,.要 灰色 要. 為了村在人仍,困難在吧夥伴2.. 中要要求要.</span> </header> <article> <div class="divleft"><img id="img1" src="img/4.jpg" /></div> <div class="divright"><img id="img1" src="img/2.jpg" /></div> <div class="clear"></div> </article> <footer> 關於 </footer> </div> </body> </html>