2019-10-18 seo達人
有張頁面是要求要一屏展示，我想到了媒體查詢，也想到了vw和vh。我先用vw和vh來布局，分為上，中，下三部分。每塊計算寬高，vw和vh可以實現(xiàn)響應式布局，所以就用上了。但媒體查詢用上了卻發(fā)現(xiàn)在這邊不好用，這時使用上了calc()屬性。因為上一個人引入了video.js并加上id:#myVideo ，這邊也做相應的計算處理。
注意：要有空格
calc()能計算的計算表達式里，在加號(“+”)和減號(“-”)兩邊要留空格，而乘號(“”)和除號(“”)沒有這個要求。
.video_rel {
height: calc(100% - 66px);
width: calc(51.3% - 60px);
#myVideo {
width: 100%;
height: 100%;
}
}
CSS3引入了一個有用的功能，就是calc()函數(shù)。在指定元素高度或寬度時，你可以基于計算設定，而不是簡單的使用固定數(shù)值。這種功能在自適應網(wǎng)頁布局設計中格外有用——針對不同尺寸的設備，你需要動態(tài)的調整元素的大小，產(chǎn)生適合屏幕大小的不同布局。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。