PC端行動端不同螢幕大小下響應式佈局
- 青灯夜游轉載
- 2018-10-11 17:31:244926瀏覽
本文為大家介紹PC端行動端不同螢幕大小下響應式佈局，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。
先上效果圖：
PC端效果：
行動端效果：
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title></title> <link rel="stylesheet" href="pc.css" media="screen and (min-width:700px)" /> <link rel="stylesheet" href="mobile.css" media="screen and (max-width:699px)" /> </head> <body> <h1 style="margin-top:20px;text-align:center;">响应式布局</h1> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
pc.css 樣式代碼：
*{margin:0;padding:0;}
ul{width:calc(100% - 20px);padding:0 10px;margin:100px auto;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid blue;width:calc(25% - 2px);height;100px;float:left;text-align:center;}mobile.css 樣式代碼：
*{margin:0;padding:0;}
ul{margin:100px auto;padding:0 5px;height:auto;overflow:hidden;}
ul li{list-style:none;border:1px solid red;width:calc(100% - 2px);height;100px;float:left;text-align:center;}我設定的臨界點是699px,實際項目中大家可根據項目需求來設定更為精準的不同螢幕下的css,一般考慮PC端，Pad，手機端三種就可以了！
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS影片教學！
以上是PC端行動端不同螢幕大小下響應式佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除