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