一、流式布局簡介
流式布局 又稱為 百分比布局 / 非固定像素布局 ;
為 流式布局 中 盒子模型 設置 百分比寬度 , 其大小可以根據(jù)屏幕寬度自適應伸縮 , 該盒子沒有像素限制 , 內(nèi)容自動向左右兩邊填充 ;
流式布局 可以 根據(jù) 設備屏幕尺寸 和 設備類型 自動調(diào)整 網(wǎng)頁布局 和 標簽元素大小 , 以適應不同尺寸的 設備屏幕 ;
當 設備屏幕尺寸 發(fā)生變化時 , 標簽元素的尺寸也會相應地調(diào)整 ;
移動端流式布局注意事項 :
- 使用 Flex 彈性盒模型 或 Grid 網(wǎng)格布局 : 使用這些布局技術可以更輕松地實現(xiàn)復雜的布局結構。
-
設置最大和最小寬度 : 在設置元素寬度時，需要考慮最小和最大寬度，以確保元素在不同設備上都能夠正常顯示。
- 最小寬度 : min-width ;
- 最大寬度 : max-width ;
max-width: 980px;
min-width: 320px;
- 使用響應式圖片 : 在移動端流式布局中，圖片大小也需要自適應調(diào)整?？梢允褂庙憫綀D片，通過設置不同的圖片尺寸和分辨率來實現(xiàn)。
- 使用媒體查詢 : 使用媒體查詢可以 根據(jù)不同的屏幕尺寸和設備類型，設置不同的CSS樣式。
- 測試不同設備的顯示效果 : 在完成布局之后，需要 在不同的設備上測試顯示效果，以確保布局在不同設備上都能正常顯示。
二、流式布局代碼示例
代碼示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webkit 初始化</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<style>
section {
/* 寬度充滿全屏 */
width: 100%;
/* 網(wǎng)頁布局寬度 默認等于 設備寬度 */
/* 設置最大寬度 瀏覽器放大 網(wǎng)頁布局不能超過 980 像素寬度 */
max-width: 980px;
/* 設置最小寬度 瀏覽器縮小 網(wǎng)頁布局不能低于 320 像素 */
min-width: 320px;
/* 版心水平居中 */
margin: 0 auto;
}
section div {
/* 設置左浮動 令兩個子元素橫向擺放 */
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1) {
background-color: blue;
}
section div:nth-child(2) {
background-color: red;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>
顯示效果 :文章來源：http://www.zghlxwxcb.cn/news/detail-439246.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-439246.html
到了這里，關于【移動端網(wǎng)頁布局】流式布局 ① ( 流式布局簡介 | 百分比布局 / 非固定像素布局 | 根據(jù)屏幕尺寸 / 設備類型自動調(diào)整網(wǎng)頁布局 )的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
