本文為大家介紹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 id="响应式布局">响应式布局</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中文網其他相關文章！
Google PagesPeed的工作原理：提高分數和搜索引擎排名Apr 18, 2025 am 10:03 AM在本文中，我們發現PagesPeed如何計算其關鍵速度分數。速度已成為提高收入和降低遺棄率的關鍵因素的關鍵因素，這已經不是什麼秘密了。現在，Google使用頁面速度作為排名因素，許多ORGA
使用NetLify表單和NetLify功能來構建電子郵件註冊小部件Apr 18, 2025 am 09:54 AM建立和維護自己的網站是一個好主意。您不僅擁有自己的平台，而且還可以在此過程中嘗試Web技術。
每周平台新聞：CSS字體風格：斜，WebHint瀏覽器擴展程序，CSS模塊V1Apr 18, 2025 am 09:53 AM在本週的綜述中，可變字體獲得傾斜，新的瀏覽器擴展名以及CSS模塊的第一個版本。
讓Mavo在構建交互式Web應用程序中發光Apr 18, 2025 am 09:50 AM您可以從標題中猜到的那樣，本教程專用於Mavo：一種創建複雜，反應性，持久性Web應用程序的新的，平易近人的方法
定罪Apr 18, 2025 am 09:49 AM大衛·德桑德羅（David Desandro）擁有大量超級酷的JavaScript庫，多年來創建的。他的最新作品是Zdog，這是一個“圓形，平坦，設計師友好的偽-3D”
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
禪工作室 13.0.1
強大的PHP整合開發環境
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
Dreamweaver CS6
視覺化網頁開發工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
