网页做多宽,响应式开发中的图片处理
分类:多线程

虽然显示器分辨率不断提高,但网页一般还是 1000 左右的宽度,一是由于小分辨率显示器也存在,二是由于网页没那么多内容放那么宽。

大家好,我是IT修真院武汉分院第九期的学员杨梓雄,一枚正直纯洁善良的前端程序员,今天给大家分享一下,修真院官网前端工程师(职业)css任务03,深度思考中的知识点——手机分辨率和网页中的px是一回事吗?

当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。

翻译自Peter LePage

但有一种效果常常需要做到足够宽,比如网页头部放一张图,横向撑满整个浏览器,下面做 1000 像素常规布局。这样的头部就带来一个问题,如果是纯色的倒好,可以做 100%,可是现在不是纯色的,是图片,如果图片小了,在大显示器中又没有撑满,反而很难看,那做多宽呢。

1.背景介绍

对于pc端适配的问题(除开布局方式),在不改变电脑分辨率,和缩放网页状态下。通常只需要设置中设置viewport即可。但是放在手机上时候就不一样了,你需要了解px,dips,ppi等等有关知识,才能应付移动端各种适配问题以及坑,光是Android各种花式分辨率和dpr就让人头疼,还有iphone的视网膜(Retina)屏幕上,也够喝一壶。

效果预览 代码下载

一个网页中平均约60%的数据量是被图片占据的,所以在响应式开发中注重图片的优化可以很大程度上提高网页的性能,例如为低分辨率的屏幕推送低分辨率的图片可以避免流量的浪费。

个人觉得做到 1920×1080 就够了,再往边缘就通过过渡到纯色来填充吧。

2.知识剖析

先来讲讲px

英文为pixel(像素),它是图像显示基本单元。分辨率是指在长和宽的两个方向上各拥有的像素个数。一个像素有多大呢?主要取决于显示器的分辨率,相同面积不同分辨率的显示屏,其像素点大小就不相同。其实这里就是物理像素,又叫设备像素。英文名(devicepixels,简称dp)最好记住英语简称,不然混在一起脑子被搅成浆糊,还有它的单位是pt。这些有限的点就叫做像素,每一个长度方向上的像素个数乖每一个宽度方向上的像素个数的形式表示,就叫做图片的分辨率。

再来谈谈ppi(pixels per inch)

ppi:每英寸多少像素数,放到显示器上说的每英寸多少物理像素及显示器设备的点距。

这里要知道1英寸(in)=(约等于)2.54cm(厘米)=25.4mm(毫米),以及为什么px不是绝对尺寸。

除了ppi以外还有dpi(每英寸上的点数),该数值可以粗略度量计算机显示器或手机屏幕等显示输出设备

css px

内CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的

还有一个设备独立像素,也叫做逻辑像素,也叫做与设备无关像素,也叫做与密度无关系像素。英文简称(dips)

设备独立像素”也有人称为“CSS像素”,一种形象的说法,更倾向于表明与CSS中尺寸的对应。前面这句话是错的但是容易理解。正确的解释是:可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素(比如:CSS像素,只是在android机中CSS像素就不叫”CSS像素”了而是叫”设备独立像素”),然后由相关系统转换为物理像素。有点绕这个问题先放放

论css像素与设备像素之间的关系

这两个之间的关系是成比例的。这里就要牵扯到另外一个名词:设备像素比(英文名dpr)。设备像素比=设备像素/设备独立

像素。可以通过JavaScript中的window.devicePixelRatio来获取设备中的像素比值。

先看看它的效果

在开始之前,点击最终预览来看看它的效果。改变浏览器的宽度,你将会看到页面布局会跟着自动改变。

图片标签

HTML中的img元素负责下载,解码并加载图片内容。做到以下几点可以帮助网页实现更好的体验:

因为这是个无底洞,4K 显示器分辨率 3840×2160,要做这么大都疯了。

3.常见问题

1.移动端的尺寸,主要是间距,宽高,字体,和图像 的尺寸。由于移动设备千差万别,如何才能保证效果呢?

2.retina屏幕下,图片模糊的情况。

3.retina下,border: 1px问题

概述

当屏幕分辨率大于1024px时,网页宽度将会是980px。用CSS3媒体查询(Media query)来检验屏幕分辨率,如果小于980px,页面宽度将会用自适应来取代固定宽度;如果小于650px,主题和边栏(content container and sidebar )将会撑满屏幕并一列显示。

 

使用相对尺寸

使用相对尺寸定义图片可以防止其超出可视范围。例如设置width: 50%可以保证图片的宽度是其父元素的50%(不是可视范围的50%也不是其实际尺寸的50%)。

因为CSS允许内容超出容器,可以使用max-with: 100%来避免图片以及其他内容超出容器范围。

4.解决方案

对于问题1要注意的的有三点

  1. html头部meat标签中的DPR

2.retina屏幕下,图片模糊的情况。

3.retina下,border: 1px问题

可以利用rem特性做动态修改根元素font-size,另外就是媒体查询了。

对于问题2

对于图片高清问题,比较好的方案就是两倍图片(@2x)。

如:200×300(css pixel)img标签,就需要提供400×600的图片。
如此一来,位图像素点个数就是原来的4倍,在retina屏幕下,位图像素点个数就可以跟物理像素点个数形成1 : 1的比例,图片自然就清晰了(这也解释了之前留下的一个问题,为啥视觉稿的画布大小要×2?)。

对于问题3

对于iphone5(dpr=2),添加如下的meta标签,设置viewport(scale 0.5)

这样,页面中的所有的border: 1px都将缩小0.5,从而达到border: 0.5px;的效果。然而,页scale,必然会带来一些问题:字体大小会被缩放页面布局会被缩放(如: div的宽高等)

HTML 代码

以下只是代码的主题结构,我用了“pagewrap”容器封装 “header”, “content”, “sidebar”, 和 “footer” together.

<div id=”pagewrap”>
<header id=”header”>
<hgroup>
<h1 id=”site-logo”>Demo</h1>
<h2 id=”site-description”>Site Description</h2>

</hgroup>

<nav>
<ul id=”main-nav”>
<li><a href=”#”>Home</a></li>
</ul>
</nav>

<form id=”searchform”>
<input type=”search”>
</form> </header>

<div id=”content”>
<article> blog post </article>
</div>

<aside id=”sidebar”>
<section> widget </section>
</aside>

<footer id=”footer”> footer </footer>

</div>

 

利用srcset为高分辨率屏幕加载高质量图片

利用img元素的srcset属性可以很方便地在不同的屏幕加载不同的图片文件。浏览器会根据设备的特定选择最佳的图片来显示,例如在retina屏幕上加载双倍分辨率的图片,或者在网速不好的情况下加载较小的图片。

<img src="photo.png" srcset="photo@2x.png 2x" ...> 

对于不支持srcset的浏览器, img元素会加载src指向的图片。对于支持srcset的浏览器,在请求页面之前会先解析srcset的内容(图片和相应的加载条件),只有最合适的图片会被下载并显示。

理论上图片加载条件可以是像素密度(pixel density)或屏幕高宽,但是现在只有像素密度的支持性比较好。

5.编码实战

HTML5.js

请注意上面我用了html5,但低于IE9版本IE浏览器并不支持<header>, <article>, <footer>, <figure>等html5标签,现在用js脚本来让它们支持。

<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

 

使用picture元素

picture 元素可以根据不同的设备特性加载不同的图片版本,例如设备尺寸,分辨率,方向等等。

一个picture元素中可以包含多个source元素,分别对应在不同情况下需要加载的图片。

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

在这个例子中,当浏览器宽度大于800像素时会根据屏幕分辨率加载head.jpg或者head-2x.jpg。当浏览器宽度介于450像素与800像素之间时,会根据屏幕分辨率加载head-small.jpghead-small-2x.jpg。当浏览器宽度小于450像素或者浏览器不支持picture元素时,浏览器会渲染img元素,因此保证picture元素中包含有一个img元素

6.拓展思考

CSS

相对尺寸图片

在一个响应式页面中,图片尺寸可能随着浏览器的缩放而改变,因此无法预先知道图片的有效像素密度。可以通过为图片文件添加宽度描述来使浏览器自动计算像素密度从而加载最合适的图片。

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

这个例子会加载一张宽度为浏览器可视区域宽度一般的图片,并且根据浏览器宽度和设备像素比选择合适的图片加载

图片 1

相对尺寸的图片

在很多情况下,图片布局也会随着浏览器尺寸的变化而改变,例如在小屏上要求图片撑满可视区域宽度,然而在大屏幕上要求图片只占可视范围的一小部分。

<img src="400.png" 
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

在这个例子中,当浏览器宽度大于600像素时,图片宽度是可视区域宽度的25%;当浏览器宽度在500像素到600像素之间时,图片宽度是可是宽度的50%;当浏览器宽度小于500像素时,图片撑满可视区域宽度。

7.参考文献

参考一:dpi、dip、分辨率、屏幕尺寸、px、density关系以及换算-人间奇迹-博客园

参考二:移动端高清、多屏适配方案-移动端H5

参考三:设备像素,设备独立像素,CSS像素

参考四:Android屏幕适配解析-详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题

把HTMl5元素定义成块(display: block;)

下面将会用CSS吧HTML5元素 (article, aside, figure, header, footer等)定义成块

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{display: block;}

 

CSS中的图片

CSS中的background属性可以使图片通过多种方法呈现,另外通过CSS3中的媒体查询也可以响应式地加载图片。

8.更多讨论

为什么psd中尺寸都是两倍?

PPT链接

视频链接:

手机分辨率和网页中的px是一回事吗?_腾讯视频

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

主体结构的CSS样式

“pagewrap”容器宽度为980px,header高度为160px.”content”容器宽600px且向左浮动,边栏”sidebar”宽280px并向右浮动。

#pagewrap {width: 980px;margin: 0 auto;}
#header {height: 160px;}
#content {width: 600px;float: left;}
#sidebar {width: 280px;float: right;}
#footer {clear: both;}

 

使用媒体查询动态加载背景图片

使用媒体查询可以虽然浏览器窗口缩放加载不同版本的图片

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

第一步效果预览

第一步演示:点击我。注意现在还不能自适应,改变浏览器宽度后网页结构并不会跟着改变。

使用image-set提供高分辨率图片

使用CSS的image-set()函数可以根据设备特性加载不同版本的图片,作用和<img>标签的srcset属性相似

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

image-set()不仅控制图片的加载,而且会根据加载的图片进行缩放缩放。浏览器默认2x的图片尺寸是1x图片的两倍,因此会缩小2x的图片使得显示出的图片大小相同。

由于image-set()只支持Chrome和Safari浏览器,所以在使用时要考虑到浏览器的兼容性,例如:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x  
  );
}

CSS3媒体查询(CSS3 Media Query)

使用媒体查询加载高分辨率图片

媒体查询可以使用设备像素比作为规则,在高分屏幕上加载高分辨率图片,例如:

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* 高分辨率的图片资源 */
}

这个例子中的两个判断条件其实是等价的,其中min-resolution是标准写法,但是只有Chrome, Firefox和Opera浏览器支持。

媒体查询脚本(Media Queries Javascript)

IE8或者更低的版本不支持CSS3媒体查询,但通过添加脚本 css3-mediaqueries.js来实现这一功能。

<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>

 

媒体查询CSS(Media Queries CSS)

为媒体查询创建新的CSS样式表,媒体查询如何工作请查看我以前的教程(media queries )

<link href="media-queries.css" rel="stylesheet" type="text/css">

 

分辨率小于980px(流动布局)

当屏幕分辨率小于980px时,以下规则将会执行:

  • pagewrap = 宽 95%
  • content = 宽60%
  • sidebar = 宽 30%

    @media screen and (max-width: 980px) {

    #pagewrap {width: 95%;} #content {width: 60%;padding: 3% 4%;} #sidebar {width: 30%;} #sidebar .widget {padding: 8% 7%;margin-bottom: 10px;}

    }

 

分辨率小于650px(一列布局)

当屏幕分辨率小于650px时,以下规则将会执行:

  • header =宽度为自动(auto)
  • searchform =搜索框距顶部5px(re-position the searchform to 5px top)
  • main-nav = 静态布置
  • site-logo = 静态布置
  • site-description = 静态布置
  • content = 宽度为自动并取消浮动
  • sidebar = 宽度为100%并取消浮动

    @media screen and (max-width: 650px) {

    #header {height: auto;} #searchform {position: absolute;top: 5px;right: 0;} #main-nav {position: static;} #site-logo {margin: 15px 100px 5px 0;position: static;} #site-description {margin: 0 0 15px;position: static;} #content {width: auto;float: none;margin: 20px 0;} #sidebar {width: 100%;float: none;margin: 0;}

    }

 

分辨率小于480px

下面是小于480px时的CSS规则,主要针对iPhone

  • html = 取消文字尺寸样式。默认情况下iPhone会自动调整到适合,你可以通过添加” -webkit-text-size-adjust: none;”来取消自动调整。
  • main-nav = 文字尺寸为90%
@media screen and (max-width: 480px) {

html {-webkit-text-size-adjust: none;}
#main-nav a {font-size: 90%;padding: 10px 8px;}

}

图片的灵活显示

为了让图片显示更加灵活,只需设置 max-width:100% 和 height:auto。然而 max-width:100% 和 height:auto在IE7中运行,但不能在IE8中运行(诡异的BUG啊),所以需要为IE8添加width:auto9。

img {max-width: 100%;height: auto;width: auto9; /* ie8 */}

嵌入类视频的灵活显示

为了让嵌入视频显示更加灵活,需要用上面同样的方法。不知道是什么原因, max-width:100% (仅仅是视频时)不能被Safari识别,此时要用 width:100%代替

.video embed,.video object,.video iframe {width: 100%;height: auto;}

初始化MeTa标签 Initial Scale Meta Tag (iPhone)

默认情况下,iPhone的Safari浏览器会自动缩小页面来显示,下面来使用Meta标签让网页字节按CSS样式显示。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

最后,根据文档我自己写了一个自适应布局的例子。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- 让页面的宽度跟设备的宽度一致,不出现横向滚动条-->
<title>自适应测试</title>
<style type="text/css">
html,body{margin:0; padding:0;}
div{display:block;}
.content{width:1240px; margin: 0 auto;}
.div{ width:600px;height:400px; margin: 10px;}
#main1,#main3{float:left;}
#main2,#main4{float:right;}

@media screen and (max-width: 980px) {//设置宽度大于165小于980的时候,显示两列布局。
    .content{width:100%;}
    .div{width:45%;height:600px;margin: 10px;}
    #main1,#main3{float:left;}
    #main2,#main4{float:right;}
}
@media screen and (max-width: 650px) {//设备可见宽度小于650的时候,用流式布局,为了不影响内容的显示,只有一列布局。
    .content{width:100%;}
    .div{ width:auto;height:400px; margin: 10px;}
    #main1,#main3{float:none;}
    #main2,#main4{float:none;}
}
</style>
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
</head>
<body>
    <div class="content">
        <div id="main1"  style="background:red;" class="div"></div>
        <div id="main2"  style="background:blue;" class="div"></div>
        <div id="main3"  style="background:black;" class="div"></div>
        <div id="main4"  style="background:yellow;" class="div"></div>
    </div>
</body>

 

本文由10bet手机官网发布于多线程,转载请注明出处:网页做多宽,响应式开发中的图片处理

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文