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)(“”)沒有這個(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ì)( m.820esy.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://m.820esy.cn