web開發(fā)中PC端移動(dòng)端不同屏幕大小下響應(yīng)式布局怎么弄

發(fā)布時(shí)間：2020-10-14 14:30:22 來源：億速云閱讀：185 作者：小新欄目：web開發(fā)

小編給大家分享一下web開發(fā)中PC端移動(dòng)端不同屏幕大小下響應(yīng)式布局怎么弄，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

PC端效果： web開發(fā)中PC端移動(dòng)端不同屏幕大小下響應(yīng)式布局怎么弄

移動(dòng)端效果：

web開發(fā)中PC端移動(dòng)端不同屏幕大小下響應(yīng)式布局怎么弄

代碼如下：

<!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>
		<h2 style="margin-top:20px;text-align:center;">響應(yīng)式布局</h2>
		<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;}

我設(shè)置的臨界點(diǎn)是699px,實(shí)際項(xiàng)目中大家可根據(jù)項(xiàng)目需求來設(shè)置更為精準(zhǔn)的不同屏幕下的css,一般考慮PC端，Pad，手機(jī)端三種就可以了！

以上是web開發(fā)中PC端移動(dòng)端不同屏幕大小下響應(yīng)式布局怎么弄的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

web開發(fā)中PC端移動(dòng)端不同屏幕大小下響應(yīng)式布局怎么弄

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽