整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
果圖:
核心點(diǎn):
寬度自適應(yīng) width
默認(rèn)情況下, 塊級(jí)元素不設(shè)置寬度, 默認(rèn)為整個(gè)屏幕寬度或者和父級(jí)同寬
如果元素脫離了文檔流(浮動(dòng)或者定位), 那么元素的寬度由元素的內(nèi)容決定相關(guān)介紹: MDN
resize 生效的條件: 不支持內(nèi)聯(lián)元素; 塊級(jí)元素，需要overflow屬性的計(jì)算值不是visible。整體布局
<div class="container">
<!-- resizable 用于拉伸的工具 -->
<div class="resizable"></div>
<!-- content 要展示的內(nèi)容區(qū)域 -->
<div class="content">content</div>
</div>基礎(chǔ)知識(shí), 拉伸區(qū)域的實(shí)現(xiàn), 右下角出現(xiàn)可拉伸圖標(biāo)
.content {
width: 200px;
height: 200px;
resize: horizontal;
cursor: ew-resize;
overflow: hidden; // 必須要配合overflow來(lái)使用resize, 否則拉伸圖標(biāo)無(wú)法顯示
border: 1px solid red;
}
<div class="content">content</div>
限制拉伸尺寸
通過(guò)設(shè)置min-width、min-height、max-width和max-height可以限制拉伸尺寸。所有代碼
<!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>Document</title>
<style>
.container {
position: relative;
/* 脫離文檔流 */
float: left;
}
.resizable {
width: 200px;
height: 200px;
overflow: scroll;
resize: horizontal;
cursor: ew-resize;
opacity: 0;
min-width: 200px; // 盒子寬度最小為200px
}
/* 更改拖拽圖標(biāo)的大小和父容器一樣大 */
.resizable::-webkit-scrollbar {
width: 20px;
height: 200px;
}
/* 使用定位, 將容器定位到父容器的正中間, 跟著父容器的大小改變而改變 */
.content {
margin: 0;
height: 200px;
position: absolute;
top: 0;
/* 留出5px為了鼠標(biāo)放上去可以顯示拖拽 */
right: 5px;
bottom: 0;
left: 0;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<!-- resizable 用于拖拽的工具 -->
<div class="resizable"></div>
<!-- content 要展示的內(nèi)容區(qū)域 -->
<div class="content">content</div>
</div>
</body>
</html>
層級(jí)圖
例
指定一個(gè)div元素，允許用戶(hù)調(diào)整大小：
div
{
resize:both;
overflow:auto;
}
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。
| 屬性 | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 不兼容 | 5.04.0 -moz- | 4.0 | 15.0 |
屬性定義及使用說(shuō)明
resize屬性指定一個(gè)元素是否是由用戶(hù)調(diào)整大小的。
注意：resize屬性適用于計(jì)算其他元素的溢出值是不是"visible"。
| 默認(rèn)值： | none |
|---|---|
| 繼承： | no |
| 版本： | CSS3 |
| JavaScript 語(yǔ)法： | object.style.resize="both" |
語(yǔ)法
resize: none|both|horizontal|vertical:
| 值 | 描述 |
|---|---|
| none | 用戶(hù)無(wú)法調(diào)整元素的尺寸。 |
| both | 用戶(hù)可調(diào)整元素的高度和寬度。 |
| horizontal | 用戶(hù)可調(diào)整元素的寬度。 |
| vertical | 用戶(hù)可調(diào)整元素的高度。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
在響應(yīng)式布局逐漸成為主流的今天，網(wǎng)頁(yè)或者app的流式布局已經(jīng)不算是一個(gè)新鮮的詞匯了。今天我要講的一個(gè)內(nèi)容也是跟頁(yè)面流式布局有關(guān)，如何讓你的網(wǎng)頁(yè)實(shí)現(xiàn)完美的縮放？
我們可以很快速的寫(xiě)出一個(gè)響應(yīng)式布局的頁(yè)面，首先看一下效果圖。
網(wǎng)頁(yè)布局
其中html部分的代碼如下：
html部分代碼
css中的item代碼為：
css代碼
通過(guò)以上代碼，完成上述的流式布局后，在我們改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行縮放。
But，你以為這就是我們想要的結(jié)果嗎？
當(dāng)然不是！在改變?yōu)g覽器窗口大小時(shí)，我們發(fā)現(xiàn)雖然div的寬度是進(jìn)行了縮放，但是高度卻沒(méi)變，因此div的寬高比并未保持原始比例，我們可以看下以下的效果。
縮放后寬高比
從上圖中可以很容易看出，縮放后的div寬高比比之前小很多，這并不是我們想要的結(jié)果。
我們需要達(dá)到的效果是在改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行等比例的縮放。
首先，可以使用Javascript代碼去實(shí)現(xiàn)，這是沒(méi)有問(wèn)題的。但是綁定Javascript的onresize事件，在拖拽時(shí)可能會(huì)出卡頓現(xiàn)象，體驗(yàn)不是很好。
接下來(lái)我們通過(guò)CSS來(lái)實(shí)現(xiàn)以上的效果。
使用的核心屬性是我們平時(shí)并不太注意的padding-bottom。
padding-bottom有一個(gè)很容易讓人忽略的特性是，當(dāng)取值為百分比形式時(shí)，其百分比的基數(shù)是父元素的寬度，而不是高度。
因此我們可以在不用給父元素設(shè)置高度的時(shí)候，就可以通過(guò)padding-bottom屬性確定當(dāng)前元素的高度。我們的做法如下。
將元素的height屬性設(shè)為0，通過(guò)padding-bottom屬性確定元素高度。
設(shè)置合理的padding-bottom值，例如上述的例子中，在寬度為21%時(shí)，如果需要高度是寬度的1.62倍，我們可以將padding-bottom取值為34%
修改后的CSS代碼如下。
修改后的CSS
修改后，我們?cè)俅握{(diào)整瀏覽器窗口的大小，就會(huì)發(fā)現(xiàn)div是等比例的進(jìn)行縮放，完美達(dá)到了我們的要求。
修改后等比例縮放
在這里，可能會(huì)有人有疑問(wèn)如果設(shè)置overflow:hidden;那么里面的文字會(huì)不會(huì)因?yàn)槌^(guò)height，就會(huì)被隱藏了？
答案是不會(huì)的，根據(jù)CSS2.1的規(guī)范，overflow只會(huì)對(duì)處于padding外面的內(nèi)容生效，即只有超出了 padding區(qū)域的內(nèi)容才會(huì)被overflow屬性隱藏掉。而在設(shè)置padding-bottom后，實(shí)際已經(jīng)決定了元素的height屬性，因此overflow:hidden;不會(huì)生效。
今天這篇文章主要講解了利用CSS完成頁(yè)面等比例縮放的最簡(jiǎn)單方式，你學(xué)會(huì)了嗎？
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
