2019-10-18 seo达人
有张页面是要求要一屏展示，我想到了媒体查询，也想到了vw和vh。我先用vw和vh来布局，分为上，中，下三部分。每块计算宽高，vw和vh可以实现响应式布局，所以就用上了。但媒体查询用上了却发现在这边不好用，这时使用上了calc()属性。因为上一个人引入了video.js并加上id:#myVideo ，这边也做相应的计算处理。
注意：要有空格
calc()能计算的计算表达式里，在加号(“+”)和减号(“-”)两边要留空格，而乘号(“”)和除号(“”)没有这个要求。
.video_rel {
height: calc(100% - 66px);
width: calc(51.3% - 60px);
#myVideo {
width: 100%;
height: 100%;
}
}
CSS3引入了一个有用的功能，就是calc()函数。在指定元素高度或宽度时，你可以基于计算设定，而不是简单的使用固定数值。这种功能在自适应网页布局设计中格外有用——针对不同尺寸的设备，你需要动态的调整元素的大小，产生适合屏幕大小的不同布局。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。