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