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