css3自適應布局單位vw,vh

視口單位(Viewport units)

什么是視口？?

在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域；而在移動端，它涉及3個視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。

視口單位中的“視口”，桌面端指的是瀏覽器的可視區域；移動端指的就是Viewport中的Layout Viewport。

?根據CSS3規范，視口單位主要包括以下4個：

? ? ? 1.vw：1vw等于視口寬度的1%。

? ? ? 2.vh：1vh等于視口高度的1%。

? ? ? 3.vmin：選取vw和vh中最小的那個。

? ? ? 4.vmax：選取vw和vh中最大的那個。

?vh and vw：相對于視口的高度和寬度，而不是父元素的（CSS百分比是相對于包含它的最近的父元素的高度和寬度）。1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度。

比如：瀏覽器高度950px，寬度為1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相對于視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax。

vmin相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin。

?

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>VW&VH</title>
</head>
<style>* {padding: 0;margin: 0}.left {float: left;width: 50vw;height: 20vh;background-color: blue;text-align: center;line-height: 20vh;font-size: 3rem}.right {float: right;width: 50vw;height: 20vh;background-color: green;text-align: center;line-height: 20vh;font-size: 3rem}
</style><body><div class="left">left</div><div class="right">right</div>
</body></html>

?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247438.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247438.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247438.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

python 操作 elasticsearch-7.0.2 遇到的問題

python 操作 elasticsearch-7.0.2 遇到的問題

錯誤一&#xff1a;TypeError: search() got an unexpected keyword argument doc_type&#xff0c;得到不預期外的參數 解決方法&#xff1a;elasticsearch7里不用文檔類型&#xff0c;所以去掉 doc_typecredit_data 錯誤二&#xff1a;RequestError(400, illegal_argument_ex…
閱讀更多...
用到的Shell

用到的Shell

sed 1i 添加的內容 file #這是在第一行前添加字符串 sed $i 添加的內容 file #這是在最后一行行前添加字符串 sed $a添加的內容 file #這是在最后一行行后添加字符串 sed -i s/.*/行首添加內容&行尾添加內容/ 文件名 //每一行 sed -i $a新增的一行 tars_build_tar.sh a…
閱讀更多...
如何解決瀏覽器縮小出現橫向滾動條時網頁背景圖出現空白的問題

如何解決瀏覽器縮小出現橫向滾動條時網頁背景圖出現空白的問題

原因&#xff1a; 當窗口縮小時&#xff0c;瀏覽器默認100%寬度為瀏覽器窗口的寬度。而忽略了下部內容層固定寬度(1024px)。從而出現了固定寬度大于100%寬度的現象。瀏覽以此理解來解析頁面&#xff0c;就出現了容器寬度理解上的差異&#xff0c;出現了一個非常奇特的BUG。 解…
閱讀更多...
前端設計模式

前端設計模式

1. 單例模式 2.裝飾器模式 轉載于:https://www.cnblogs.com/lyraLee/p/11210985.html
閱讀更多...
區別 (function($){...})(jQuery)、$(function(){ })和$.fn

區別 (function($){...})(jQuery)、$(function(){ })和$.fn

一、(function($){…})(jQuery) 首先function(arg){...}定義了一個匿名函數&#xff0c;參數為arg,而調用時需要在函數后面寫上括號和實參&#xff0c;由于操作符的優先級&#xff0c;函數本身也需要括號&#xff0c;也就成了&#xff1a; &#xff08;function(arg){...}&…
閱讀更多...
git 清除緩存

git 清除緩存

清除git緩存 git config --local --unset credential.helpergit config --global --unset credential.helpergit config --system --unset credential.helper保存git緩存 git config --global credential.helper store轉載于:https://www.cnblogs.com/zhouyideboke/p/11211650.…
閱讀更多...
網頁里如何使用js禁用控制臺

網頁里如何使用js禁用控制臺

網頁里如何禁用右擊事件&#xff1f;使用jQuery&#xff0c;幾句代碼就可以搞定了 document.oncontextmenu function(){return false;} 簡單示例&#xff1a; js實現&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><…
閱讀更多...
Java生鮮電商平臺-訂單中心服務架構與異常訂單邏輯

Java生鮮電商平臺-訂單中心服務架構與異常訂單邏輯

Java生鮮電商平臺-訂單中心服務架構與異常訂單邏輯 訂單架構實戰中闡述了訂單系統的重要性&#xff0c;并從訂單系統的信息架構和流程上對訂單系統有了總體認知&#xff0c;同時還穿插著一些常見的訂單業務規則和邏輯。上文寫到訂單的拆單部分時擱置了&#xff0c;現在接上文繼…
閱讀更多...
Vuex的全面用法總結

Vuex的全面用法總結

1. vuex簡介 vuex是專門用來管理vue.js應用程序中狀態的一個插件。他的作用是將應用中的所有狀態都放在一起&#xff0c;集中式來管理。需要聲明的是&#xff0c;這里所說的狀態指的是vue組件中data里面的屬性。了解vue的同學應該是明白data是怎么回事的吧&#xff0c;如果不懂…
閱讀更多...
vue中通過第三方代理解決跨域問題

vue中通過第三方代理解決跨域問題

最近在學node&#xff0c;遇到了跨域的問題&#xff0c;來記錄下方法 首頁服務端的框架是通過express-generator 搭建起來的 npm install -g express-generator 具體接下來的細節不多說&#xff0c;今天主要說跨域 的問題 左側為服務端項目結構&#xff0c;www為可執行文件&am…
閱讀更多...
使用V-chart時配置踩過的一些坑

使用V-chart時配置踩過的一些坑

如何配置圖表信息 echart的配置項可謂是相當的海量&#xff0c;能不看就不看。而v-chart對其進行了不少的簡化&#xff0c;所以我們想要自定義一個圖表時&#xff0c;最好按照以下步驟來檢查&#xff1a; 圖表私有屬性 v-chart每一個圖表都有自己獨有的設置項&#xff0c;想…
閱讀更多...
ZDOzMRVAOq

ZDOzMRVAOq

11 轉載于:https://www.cnblogs.com/wc529065/p/11212226.html
閱讀更多...
vue 出現Elements in iteration expect to have 'v-bind:key' directives

vue 出現Elements in iteration expect to have 'v-bind:key' directives

是由于eslint檢測出現bug 解決方法有兩種 v-for 后添加 :keyitem <li v-for"item in list" :key"item"> 在build處關閉eslint檢測 ...(config.dev.useEslint ? [createLintingRule()] : []),
閱讀更多...
requestAnimationFram

requestAnimationFram

window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個動畫&#xff0c;并且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數&#xff0c;該回調函數會在瀏覽器下一次重繪之前執行 注意&#xff1a;若你想在瀏覽器下次重繪之…
閱讀更多...
vue/return-in-computed-property Enforce that a return statement is present in computed property

vue/return-in-computed-property Enforce that a return statement is present in computed property

此規則強制return語句在computed屬性中得完整存在。 <script> export default {computed: {/* ? GOOD */foo () {if (this.bar) {return this.baz} else {return this.baf}},bar: function () {return false},/* ? BAD */baz () {if (this.baf) {return this.baf}},ba…
閱讀更多...
vue-cli3 一直運行 /sockjs-node/info?t= 解決方案

vue-cli3 一直運行 /sockjs-node/info?t= 解決方案

首先 sockjs-node 是一個JavaScript庫&#xff0c;提供跨瀏覽器JavaScript的API&#xff0c;創建了一個低延遲、全雙工的瀏覽器和web服務器之間通信通道。 服務端&#xff1a;sockjs-node&#xff08;https://github.com/sockjs/sockjs-node&#xff09; 客戶端&#xff1a;so…
閱讀更多...
Java生鮮電商平臺-生鮮供應鏈(采購管理)

Java生鮮電商平臺-生鮮供應鏈(采購管理)

Java生鮮電商平臺-生鮮供應鏈(采購管理) 在生鮮供應鏈系統中采購中心這一模塊&#xff0c;它是電商公司管理采購的模塊&#xff0c;包含供應商管理&#xff0c;采購訂單管理&#xff0c;采購商品管理&#xff0c;在該模塊中采購訂單是采購中心的核心模塊。在其他的比如供應商的…
閱讀更多...
鏈式調用setTimeout()與setInterval()的區別

鏈式調用setTimeout()與setInterval()的區別

使用 setTimeout()和 setInterval()創建的定時器可以用于實現有趣且有用的功能。執行時機是不能保證的&#xff0c;因為在頁面的生命周期中&#xff0c;不同時間可能有其他代碼在控制 JavaScript 進程。在頁面下載完后的代碼運行、事件處理程序、Ajax 回調函數都必須使用同樣的…
閱讀更多...
Multiple Dispatch

Multiple Dispatch

今天在看文章的時候遇到了multiple dispatch這個術語。看看了wiki&#xff0c;寫得云里霧里。最后搜了搜資料&#xff0c;基本上搞清楚了。 multiple dispatch的混淆之處在于其和object system結合在一起。當然wiki上寫得很清楚&#xff1a;“a function or method can be dyna…
閱讀更多...
如何讓Element UI的Message消息提示每次只彈出一個

如何讓Element UI的Message消息提示每次只彈出一個

Element UI的Message消息提示是點擊一次觸發一次的。在開發的時候經常會作為一些校驗提示&#xff0c;但是公司的測試人員在進行測試時會一直點&#xff0c;然后就會出現如下圖的情況。雖然客戶使用的時候一般來說不會出現這種情況&#xff08;畢竟客戶不會閑著沒事一直點點點&…
閱讀更多...
最新文章

Copyright @ 2022~2023