時間：2023-10-01 04:00:02 | 來源：網(wǎng)站運營
時間：2023-10-01 04:00:02 來源：網(wǎng)站運營
自適應(yīng)（電腦/平板/手機）網(wǎng)頁，自適應(yīng)網(wǎng)頁設(shè)計練習(xí)總結(jié)：剛好寫了個練習(xí)，應(yīng)該是這種效果吧！
在線咨詢
<meta name="viewport" content="width=device-width， initial-scale=1" />width=device-width：網(wǎng)頁寬度默認(rèn)等于屏幕寬度<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->②禁止使用絕對寬度（css中）width：10px； <!-- 這種代碼不可行 -->可行：以下兩種代碼均可width: 20%;width:auto;③靜止對字體使用固定大?。╟ss中）font-size: 12px可行：以下代碼均可行font-size:1.2em補充：瀏覽器的默認(rèn)字體高都是16px，所以未經(jīng)調(diào)整的瀏覽器在顯示1em=16px。于是我們就可以通過這個等量關(guān)系進(jìn)行計算了！若已經(jīng)寫好的網(wǎng)頁字體的px直接除以16就是em了。body { font: normal 100% Helvetica， Arial， sans-serif;} <!--html中-->④得是流動布局（css中）#father .panel_text{ background-color: #F5F5F2; float: left; margin-left: -88%; margin-top: 15%; width:295%; height:200%; }⑤讓網(wǎng)頁選擇適應(yīng)屏幕的css，就像Java等語言中的if判斷（在html中）<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="css/tinyScreen.css" />}else if（如果400像素<屏幕寬度<600像素）{<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)" href="css/tinyScreen.css" />}@media screen and (max-width: 300px) { body { background-color:lightblue; }} 最后來個總結(jié)吧：印象最深的就是自適應(yīng)的思維和物理學(xué)很近有木有！由于物體可以選取其他不同的東西做參考，所以物理書：“運動是絕對的，靜止是相對的”那遷移到這個代碼上也是一樣啦！網(wǎng)頁對應(yīng)不同的屏幕標(biāo)準(zhǔn)得自動適應(yīng)，那代碼就得采用相對的，而不是絕對的！關(guān)鍵詞：適應(yīng),練習(xí),總結(jié),設(shè)計,電腦,平板
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
