新闻观点

辽宁35选7跨度走势: 响应式网站策划技巧

标签: | 作者:yunfan | VISITORS: | 来源:未知
20
Jul
2017
项目中使用boot来实现响应式,必须使用图片做背景。我先用CSS3里的background-image:(url);background-size:cover;但是这样在移动端的时候背景图会显示不全。 然后我用bootstrap 里面的img-responsive 但是上面的内容就只能用绝对定位上去。而且里面的内容不好控制。也达不到响应式的。
成都响应式网站策划
我试了一下,想到一个有瑕疵的解决方案
background-size:cover;
改为
background-size:container;

在html里面添加一个img标签,设置为响应式,即添加
class='img-responsive'
然后在css中设置这个img为
display:none;
因此这个图片只是用来获取当前背景图的高度的,然后再把获取到的高度设置为背景图片的高度。
类似这种:
$(document).ready(function(){
         //初始设置
         var mastheadHeight=$('#assitImg').css('height');
    $('.masthead').css('height',mastheadHeight);
    //背景图随屏幕大小改变
    $(window).resize(function(){
        var mastheadHeight=$('#assitImg').css('height');
        $('.masthead').css('height',mastheadHeight);
    });
    
})

屏幕突然变大或变小时会出现空白,可以在父级中通过
overflow:hidden;
来避免。
缺点:
1.    用了一张多余的图片,会拖慢网页加载速度
2.    获取到的辅助图片的height并不精准,比实际背景图片高度小

相关新闻
安徽快三走遗漏 | 网站建设 | 质保体系 | 服务范围 | 移动终端 | 经典案例 | 新闻观点 | 服务客户 | 安徽快三走遗漏