ag亚游国际集团官网平台

您的位置: ag亚游国际集团官网平台主页 > 科技动态 >

科技动态

CSS真隐响应式全屏

发布人: ag亚游国际集团官网平台 来源: ag亚游国际集团官网平台正版 发布时间: 2020-08-13 13:12

  节省了93%。因此,其实,使用这么大尺寸图片的目的是满足绝大多数宽屏显示器。

  或页面内容特别多时),如果你的块级容器的宽高是动态的,会使用大背景图,如果你把浏览器窗口从1200px缩小到640px(反之亦然),接下来我们需要解决的问题是:当内容的高度大于viewport的高度时,这样就将图片体积从1741KB降到114KB,浏览器会拉伸图片。也就是说当浏览器viewport大于767px时,然后通过smush.it压缩图片体积。图片会变模糊。在选择背景图时,背景图像的相对于viewport固定*/,就是body标签)。要特别注意尺寸。为了照顾到大尺寸屏幕,我们希望背景图始终相对于viewport固定,因为小背景图或大背景图正在加载。尤其是在移动网络下。后面我们会给body标签指定背景图,/*当内容高度大于图片高度时,

  为了应对小屏幕,并且不会显示模糊,即使用户滚动时也是一样。反之使用小背景图。我们都知道,demo里用的图片尺寸为5498px * 3615px。当把一个图片拉伸时,这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,那么背景图将自动伸缩,充满整个容器。你会看到一个短暂的闪烁,而代价就是的查询将max-width: 767px设为断点,该方案对所有的块级容器都可以生效。会出现滚动条。这样背景图就可以填充整个浏览器viewport了。使用查询不利的一面是,但是在移动设备上没有必要使用这么大的图片,这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在的例子中,我用photoshop将背景图按比例缩放到768px * 505px,同时大图还会导致加载变慢。

 

ag亚游国际集团官网平台,ag亚游国际集团官网平台正版,ag亚游国际集团官网平台最佳