海曙网站设计建设:提高你的HTML5和CSS3技术为高分辨率做好准备
author:一佰互联 2019-05-23   click:186
 HTML5和CSS3:让你的网站为高分辨率显示器做好准备
    
    几年前,当苹果公司推出一种新的高分辨率显示器,即所谓的视网膜显示器,iPhone、iPad和MacBook时,它们开创了显示质量的新时代。在这样的屏幕上,人眼无法分辨单个像素。
    
    高分辨率显示器是常态,也不例外。今天,你会发现越来越多的中端高分辨率移动设备。许多应用程序是高清兼容的,现在你可以使用HTML5、CSS3和JavaScript创建高分辨率网站,而不需要额外的JavaScript库。
    
    双像素密度引起的双锐度
    
    移动设备使用320像素的默认宽度,所以很多移动网站设计宽度。然而,高分辨率的显示器有两个或更多的像素。这将被放大,以防止站点上显示一半大小的两倍密度。此工作的字体和矢量图形都很好。位图。然而,诸如JPEG和PNG文件的格式变得模糊和失真。
    
    海曙网站设计建设由于这种显示越来越流行,提供高质量的Web项目是Web设计人员和开发人员的重要因素。
    
    HTML5、SRCSET属性
    
    长期以来,人们一直努力在HTML5中提供高分辨率的显示图像。srcset属性已经成为首选方法。它允许您定义具有不同像素密度的多个文件源。像素密度定义以下参考图像中的一个空间,例如,TWO像素密度。
    
    与LT;IMG的SRCSET=图像。JPG,图像@ 2x.jpg 2xSrc= jpg图像。宽度=320高度=160ALT=/>;
    
    在上面的示例中,通过srcset定义了两个文件。第一个文件是用于标准像素密度的设备。对于标准像素密度,该值可以是1x。这是一个两像素密度显示文件。SRC属性应该作为旧浏览器回滚。同时,参考正常图像h。艾尔。
    
    在高分辨率显示中对比两幅图像:两像素密度(上)和标准像素密度(下)
    
    还可以在文件源中添加srcset属性,该属性具有图像的适当物理宽度和高度,而不是定义像素密度。
    
    用LT;IMG SRCSET=IMAGE -3W.JPG 3W,IMAGE 640W.JPG响应SRC= IMAGE 640W JPG.ALT= />;
    
    如果选择后者,如果不使用高度或宽度属性,则图像将缩小到浏览器窗口的宽度。在浏览器中为设备选择适当的文件。如果设备的屏幕宽度达到320像素,则浏览器将使用文件图像-320w.jpg。分辨率超过320像素,它将使用文件映像640W.JPG。
    
    通过使用大小属性,您可以调整图像显示的宽度。您需要指定媒体信息以及优先级图像宽度。
    
    对于LT;IMG srcset=image-320w.jpg 320W,image-640w.jpg响应大小=最小宽度:320px)50vw,(最大宽度:320px)100vwSRC=bild-640wJPG.ALT=/>;
    
    在上面的例子中,图像将减少到至少320像素(最小宽度:320)的视口(50vw)的50%的宽度。如果小于320像素,则图像将占据整个视口宽度(100vw)。
    
    HTML 5-CSS3-PixeldCiTe尺寸
    
    不同宽度:肖像模式100%和景观模式50%视图
    
    只能在像素密度(例如,2)或宽度和高度(例如,320W 160h)内定义srcset文件引用。
    
    srcset属性还具有与它们相关联的新作品和元素,允许您定义不同显示窗口大小的图像。您还可以定义不同像素密度的来源。
    
    图片和GT;
    
    源SRCSET=IMAGE 640W.JPG,IMAGE 640W@ 2X.JPG 2X Media=(最小宽度:3px)/>;
    
    源SRCSET=IMAGE -3W.JPG,IMAGE -3WW2X.JPG 2X媒体=(最大宽度:3px)/>;
    
    IMT SRC=图像640W JPG。宽度=320高度=160ALT=/>;
    
    L/;图片和GT;
    
    在上面的示例中,四个文件的来源是通过两个元素文件image-320w.jpg和image-320w@2x.jpg,显示窗口的宽度将小于320像素(取决于像素密度)。0像素。请记住,元不知道宽度和高度属性。如果你想定义大小,你需要使用CSS。
    
    不要忘记提供IMG>备份旧浏览器。
    
    Chrome 38+和Firefox 38+都支持Srcset、size属性和meta。Internet Explorer目前不支持属性和元素。Android Chrome 40和iOS 8.1Safari浏览器。Safari只支持其中的一小部分。
    
    如果希望使用srcset不支持的浏览器的属性,则可以获得模仿旧浏览器功能的Poly.。
    
    CSS3与图像集()
    
    还可以定义使用具有不同像素密度的CSS3的图像源。这是image-set()。与HTML5的属性srcset类似,可以通过URL()引用多个文件。.-set()可以通过URL()用作图像源。
    
    主体{背景-图片:URL(Mercury.JPG;背景-图片:图片-配置(URL(mercury.JPG)1x,URL(hg@2x.jpg)2;
    
    }
    
    海曙网站设计建设在上面的示例中,两个像素密度通过背景图像表示image-set()。目前,您应该使用适当的供应商前缀标记,如-WebKit-image-set()。同样,它也许会退避。这是一个重要的后退图像集()。不知道图像集()会忽略第二个背景图像属性。所有其他浏览器都将执行第二个属性并重写第一个属性。
    
    HTML 5-CSS3-PixelDeCHT-HG
    
    高分辨率背景(第一部分)和正常分辨率背景(第二部分)
    
    image-set()符号是Safari Chrome 31+、7.1+和Android Chrome 40+,它们当前支持iOS。Firefox和IE浏览器不支持它。
    
    除了图像集()符号之外,它还支持具有不同像素密度的图像。还有媒体查询,考虑不同的像素密度和任何CSS属性的最小和最大分辨率。
    
    媒体屏幕(最小分辨率:2DPPX){体{背景:URL(HG@ 2X.JPG);
    
    }
    
    }
    
    在上面的示例中,背景图通过最小化分辨率显示了两个像素的密度。单位DPPX表示每个像素的像素密度。但是还有其他单位DPI(每英寸的点),它们允许以打印分辨率提供图像,或者DPCM(每厘米的点)。它是DPPX屏幕。
    
    分辨率特性由chromium+31和Firefox 35+支持。Internet Explorer只支持版本9中的DPI单元。Android Chrome支持版本40和iOS版本7.1,但是Safari只有旧符号设备的最小或最大设备像素比。
    
    替代方案:只有高分辨率的Bitmaps
    
    新的HTML5元素和属性允许您为不同的分辨率和像素密度进行成像;但是,您通常生成不同的图像文件。,并且您需要手动生成文件变体。
    
    那些想要保留的人也需要考虑高像素密度可以采取中间路线,这要求所有像素密度只有一个文件。创建一个双分辨率-最佳质量退化-图像文件,并将其嵌入到HTML文档的一半分辨率中。法师,看起来会像这样:
    
    IMT SRC=图像640W JPG。宽度=320高度=160ALT=/>;
    
    高清屏幕显示完全的物理分辨率,屏幕图像的标准尺寸减少到一半。使用标准像素密度,您不会注意到质量损失的任何增加。双像素密度仍然提供了比正常分辨率更好的图像质量。我会得到的。
    
    另一方面,标准的分辨率显示器会下载不必要的大文件。因此,只能使用高度压缩的JPEG文件。
    
    HTML5-CSS3-PixeldCeTe-压缩
    
    半压缩高压缩JPEG文件(第一部分)
    
    还可以使用CSS双分辨率组合图像。属性背景大小允许将图像的分辨率降低一半。
    
    正文{背景图片:URL(水星)。背景尺寸:32 px 16px;
    
    如果例子中的背景图像的分辨率是64x 32像素,那么它将显示一半的大小。
    
    使用SVG和ICONBONTS
    
    所有新的浏览器都基于SVG格式的支持向量。尤其是logo,但是还有很多其他的图形元素矢量图形,并且作为GIF或PNG文件嵌入到网站中。由于SVG格式,矢量图形也可以显示在网站上,而不管您是否使用HTML throug。HIMG>
    
    SVG的优点应该是明确的:它是基于矢量的,它总是以最好的分辨率显示,此外,它使带宽和节省时间,因为它不需要提供不同的分辨率和像素密度。
    
    图标字体的高清晰度显示是SVG的一个不错的选择,因此基于矢量的字体具有最好的分辨率。
    
    如果你想对SVG下注,不要排除旧的浏览器不支持SVG,你可以使用一些备份技术。
    
    利用JavaScript确定像素密度
    
    有时,例如通过JavaScript在画廊中加载图片。您可以直接加载具有适当像素密度的正确图像源,而不是通过JavaScript生成IMG><element所有srcset引用。
    
    JavaScript知道属性DeVixExxEL比率,它指示像素密度。
    
    IF(窗口)。设备像素比和Gt;1){IMG对应于文件{ 0 }。SRC= IMAGE @ 2X.JPG;
    
    }
    
    在上面的示例中,如果像素密度高于1负载,则将生成图像文件。逻辑上,只能读取属性。
    
    在使用设备像素比时要记住一点:值取决于浏览器的实际放大倍数。如果文件在150%的浏览器中放大并显示,则设备像素比提供1.5标准像素密度的值。2像素de的显示值在相同的比例因子下,NISE为3。海曙网站设计建设
    
    结论及相关环节
    
    为Web项目准备高清晰度显示器可能是一项具有挑战性的任务。但是,应该始终考虑高像素密度,尤其是在处理新项目时。所有解决方案都可以很容易地配备回退功能,因此存在不离开旧浏览器的风险。