欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5零基础学习日记

程序员文章站 2022-06-06 21:26:07
...

由于显示器之间像素密度的不同,某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时,可能因出现“像素化”而不够清晰 

让图像正确出现在高分辨率显示器上的最简单方式, 是定义它们的 width 和 height 值为原始值的一半。 下面是一个仅使用原始高度和宽度一半的图像示例:

<style>
  img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">

 

使排版根据设备尺寸自如响应

除了使用 em 或 px 设置文本大小,你还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位,但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸,百分比是相对于父级元素的大小。

四个不同的视窗单位分别是:

  • vw:如 10vw 的意思是视窗宽度的 10%。
  • vh: 如 3vh 的意思是视窗高度的 3%。
  • vmin: 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
  • vmax: 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。

下面这个例子是设置 body 标签的宽度为视窗宽度的 30%。

body { width: 30vw; }

 

相关标签: 零基础学习