calc的使用 - 蓝蓝设计_UI设计公司

帝皇彩票官网

calc的使用

2019-10-18 释然 前端及开发文章及欣赏

       有张页面是要求要一屏展示,我想到了媒体查询,也想到了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.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标签: calc的使用

Powered by sitemap
江苏快3平台 帝皇彩票官网 帝皇彩票 帝皇彩票登陆 帝皇彩票登陆 华夏彩票注册 状元彩票开奖 桔子彩票官网 状元彩票官网 帝皇彩票登陆