PC端行動端不同螢幕大小下響應式佈局-css教學-PHP中文網

首頁

web前端

css教學

PC端行動端不同螢幕大小下響應式佈局

青灯夜游

Oct 11, 2018 pm 05:31 PM

css 回應式佈局自適應

本文為大家介紹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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7493

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。