那么就会一个物理像素对应4个位图像素必威,我

闲聊响应式图片

2016/11/14 · HTML5 · 5 评论 · HTML5, 响应式图片

正文作者: 伯乐在线 - TGCode 。未经我许可,禁止转发!
接待加入伯乐在线 专栏撰稿人。

“响应式(Responsive)”这一个词笔者想大家未有听过1000遍,也可能有97次了。响应式是指达成差别荧屏分辨率的极限上浏览网页的不等展现格局。英特网介绍响应式的篇章也是有过多了,举例:《自适应页面设计》。在那篇文章中,大家不讲页面布局的响应式,大家主要来探视“响应式图片”。
那篇小说首要内容:

  • 为啥要选用响应式图片
  • <picture>元素
  • img的srcset、sizes属性

1、为何要动用响应式图片

如果有一张图纸的显得升幅为200px,那么,它在 1x(即设备像素比为 1 的荧屏) 的显示屏上,是占了 200 个大意像素(即事实上所占的像素);它在2x 的显示屏上,实际上是占了 400 个轮廓像素;在 3x 的荧屏上,实际上是占了 600 个大意像素;在 4x 的显示屏上正是占了 800 个大要像素。

设若那么些图片只提供 200 像素的尺码,那么在 2x~4x 的显示屏上看起来就很模糊。即便只提供 800 像素的本子,那么在 1x~3x 的设施上会显得多余,因为加载时间会相较长,所以大家要选用响应式图片。

咱俩有二种方法来安装响应式图片:

  • 使用<picture>元素(HTML5新增)
  • 使用img的srcset、sizes

2、picture元素

在HTML 5中,扩大了叁个新因素<picture>。用过<video>、<audio>的,会感觉<picture>的用法很熟识:

<picture>   <source srcset="smaller.jpg" media="(max-width: 750px)">   <source srcset="default.jpg">   <img srcset="default.jpg" /> </picture>

1
2
3
4
5
6
7
8
9
<picture>
 
  <source srcset="smaller.jpg" media="(max-width: 750px)">
 
  <source srcset="default.jpg">
 
  <img srcset="default.jpg" />
 
</picture>

 

不知道您放在心上到没有,在 media 属性使用的语法与CSS媒体(media)性格中使用的语法同样。你能够应用同样的性状,也正是说你能够查询 max-width , min-width , max-height , min-height , orientation 等品质。

看来<picture>这几个成分是或不是很欢悦,但是不得不提示你一句,如今以来,那几个成分仍旧有包容性难点的。

兼容性:兼容性

自然,假诺您料定要运用<picture>这一个因素,又要在任何浏览器里辅助,那您就须要增加三个至极的插件:Picturefill2.0

<script src="picturefill.js"></script>

1
<script src="picturefill.js"></script>

就算如此<picture>非常低价,但假若你思量到包容性,依旧要谨严运用,不过,大家也可以有包容性较好的其他一种处理响应式图片的点子,看上面。

3、img的srcset、sizes属性

理所必然,<img>成分本人也提供了响应式的属性:srcsetsizes

3.1 旧版本的srcset属性

在原先,我们是那样用的:

<img src="width-128px.jpg" srcset="width-128px.jpg 1x, width-256px.jpg 2x" />

1
<img src="width-128px.jpg" srcset="width-128px.jpg 1x, width-256px.jpg 2x" />

这段代码什么意思吧?

浏览器依据荧屏不一样的像素密度(x)来展现对应尺寸的图纸,也足以说是基于设备的像素比来呈现不相同的图形。

看图:

必威 1

必威 2

别老是望着“别人的胞妹”,请小心花青箭头,DP中华V正是设备像素比,分歧的像素比,会显得分歧的图片。

当前显示器密度有:1x、2x、3x、4x。

3.2 新专门的工作的srcset、sizes属性,w描述符

旧版本的srcset使用多少有个别局限性,可是幸而的是到二零一六年,大家已经有了斩新的srcset,并且还多二个size是性质。

运用新的srcset,我们只必要提供图片财富乃至断点,浏览器会去自动相称最好彰显图片。

使用方法如下:

<img src="width-128.jpg" srcset="width-128.jpg 128w, width-512.jpg 512w" sizes="(max-width: 500px) 128px, 512px" />

1
<img src="width-128.jpg" srcset="width-128.jpg 128w, width-512.jpg 512w" sizes="(max-width: 500px) 128px, 512px" />

地方这段代码的意味表示:不帮忙srcset属性时,使用src中的图片,不然浏览器会自行匹配最棒显示图片;sizes天性的值表示当可视区宽度不超过500像素,则图片宽度呈现为128px,其余情况下,图片宽度呈现为512px。。

必威 3

必威 4

在乎:假设你用pc浏览器测量试验这段代码,一定要先步入活动格局,因为一展开页面时可视区大于500px(除非你的管理器是Mini版),会先出示大图片,随后尽管你减弱显示屏,小图片尽管会加载,你能够在调控台的“Network”里看看,不过来得的依旧会是大图片,因为前面大图片已经缓存了,而浏览器会活动相配最棒突显的图片。

srcset用来提供图片能源,sizes特性的功效类似媒体询问,用来安装图片尺寸的临界点。

sizes="[media query] [length], [media query] [length]..."

1
sizes="[media query] [length], [media query] [length]..."

要保管使用sizes 里总括出来的幅度始终是图表所占荧屏宽度(length)。

缘何说sizes属性的效应类似媒体询问呢?

因为它只是支撑部分媒体询问,比方:

(min-width: 400px) (not (orientation: landscape) ) ( (orientation: landscape) and (min-width:400px) ) ( (orientation: portrait) or (max-width: 500px) )

1
2
3
4
5
6
7
(min-width: 400px)
 
(not (orientation: landscape) )
 
( (orientation: landscape) and (min-width:400px) )
 
( (orientation: portrait) or (max-width: 500px) )

 

但它不扶助大家驾驭的定义媒体类型:举例screen或许print等等。

而外利用px外,大家还足以采用em、px、cm、vw…,以致CSS3的calc,不可能应用比例。

sizes=”(max-width: 320px) calc(100vw – 20px), 128px”

代表当视区幅度不超出320像素时候,图片宽度为任何视区宽度减去20像素的轻重缓急。

宽容性查看:兼容性

3.3 常见的利用情况

(1)假使图片的肥瘦是整整视口的比例,那么sizes可以这么设置:

sizes="80vw"

1
sizes="80vw"

(2)假设图片两边的边距各为10px,我们能够如此设置:

sizes="calc( 100vw - 20px)"

1
sizes="calc( 100vw - 20px)"

(3)假诺有三个两边边距为10px的图片,允许它的最大幅面为500px,我们得以这么设置:

sizes="( min-width:520px) 500px, calc(100vw - 20px)"

1
sizes="( min-width:520px) 500px, calc(100vw - 20px)"

下面的代码表示当可视区大于520px时,图片宽度为500px,不然宽度为calc(100vw – 20px)总结的值。

打赏支持作者写出更加的多好文章,谢谢!

打赏小编

别老是望着“外人的堂姐”,请在意灰褐箭头,DP奥迪Q5正是设备像素比,差别的像素比,博览会示区别的图纸。
此时此刻显示器密度有:1x、2x、3x、4x。
3.2 新职业的srcset、sizes属性,w描述符
旧版本的srcset使用多少有个别局限性,可是幸亏的是到二〇一四年,大家曾经有了全新的srcset,何况还多贰个size是性质。
行使新的srcset,我们只要求提供图片财富以至断点,浏览器会去自动相配最棒呈现图片。
利用方法如下:
<img src="width-128.jpg" srcset="width-128.jpg 128w, width-512.jpg 512w" sizes="(max-width: 500px) 128px, 512px" />

响应式设计


所谓的响应式设计,是指在分裂的显示器分辨率,区别的像素密度比,分裂幅度的极端设备中,网页布局能够自适应的调动。响应式设计的本意是使本来 PC 上的网址包容移动终端,大多数响应式网页是透过媒体询问,加载分化体裁的 CSS 文件落到实处的。那样的弹性化布局使网址在分裂的配备终端布局都相比合理。
虽说响应式设计的功利多多,不过也许有大多短处。由于 PC 端和移动终端访谈的是同多个网站,PC 端能够不计较流量限制,不过运动端不大概不争论。

必威 5

响应式布局暗意图

为适配不一致终端机型的荧屏宽度和像素密度,大家日常会动用如下方法设置图片的 CSS 样式:

<style>
    img{
        max-width:100%;
        height:auto;
    }
</style>

将图纸的最大开间设置为 百分之百,以担保图像不会超越其父级成分的增长幅度,如若父级成分的增长幅度发生转移,图片的升幅也随后改换,height:auto 能够保险图片的上涨的幅度爆发更换时,图片的可观会依附自个儿的宽高比例实行缩放。
诸有此类当大家在运动设备上访谈响应式网页里的图样时,只是把图纸的分辨率做了缩放,下载的可能PC 端的那张大图,那样不独有浪费流量,况兼浪费带宽,而且会拖慢网页的展开速度,严重影响客户的运用体验。

HTML建设方案——srcset+sizes+w标志符

那是HTML5出产的性质,srcset能够依靠显示器分辨率智能加载最好展现的图形。

必威 6

srcset属性包容性

<img class="image" src="mm-width-128px.jpg" 
srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w" 
sizes="(max-width: 360px) 340px, 128px">

srcset :指向提供的图样能源,为客商提供了一种内嵌简单的分辨率媒体询问作用;

sizes : 钦点图片宽度,不能够动用比例,可应用:
px,
vw(100vw正是占满父容器宽度,所以需要图片居中山高校幅度为百分比的地方能够利用vw单位,如 sizes=80vw),
calc运算(适用于两侧距离固定的景况,如sizes="calc(100vw-20px)"),
媒体询问(如sizes="(min-width:360px) 340px,128px")。

再者最关键的是,sizes属性发生的初志正是足以在html中落实轻松的媒体询问效能,来适应更加的遍布的响应式网站开辟。

那么w是个啥?
w是一个衡量宽度的标记符,一定要对应图片的真实性宽度,那会使得浏览器准确的挑选图片,要是w值和图纸宽度不对合时,实际渲染是会有难题的。

拿这段代码来讲:

<img class="image" src="test-240.jpg"   
    srcset="test-240.jpg 240w, test-480.jpg 480w, test-720.jpg 720w" 
    sizes="240px"> 

sizes=240px,也便是图片宽度设置为了240px,那么:
当该荧屏dpr==1时,就能够选用test-240.jpg;

必威 7

dpr==1

dpr==2时,可渲染的位图像素宽度就成为了480px,也就选用了test-480.jpg;

必威 8

dpr==2

dpr==3时,能渲染的位图像素宽度变为了720px,那么浏览器去选用最适合的图样,也正是test-720.jpg;

必威 9

dpr==3

关于w值设置要是不得法,会产出哪些后果,小编在那篇小说中写了详尽的案例。

今世浏览器对该属性的支撑是更加多了,那一个方案应该会是个前卫。
在运动端andriod browser的支撑度实在是太差劲了,PC端对于部分fashion的网址试一试。

以后和过去很分裂样道具展现分化图片

body {
    background-image: url('img_smallflower.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

能够行使媒体询问的 min-device-width 代替 min-width 属性,它将检查实验的是道具宽度并非浏览器宽度。浏览器大小重新设置时,图片大小不会转移。

/* 设备小于 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}

/* 设备大于 400px (也就是): */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

 

关于笔者:TGCode

必威 10

路途虽远,无所畏 个人主页 · 小编的稿子 · 9 ·    

必威 11

使用img的srcset、sizes

新的应用方案:<picture>


  • <picture>是 HTML5 的二个新因素;
  • 如果<picture>要素与当前的<audio>,<video>要素协同合营将增加响应式图像专业的历程,它同意在个中间安装三个<source>标签,以钦赐分裂的图像文件名,依照分裂的条件进行加载;
  • <picture>能够依赖不一样的标准化加载分歧的图像,那么些标准得以是视窗当前的可观(viewport),宽度(width),方向(orientation),像素密度(dpr)等;

举多少个栗子

  1. 如下栗子中针对分化显示屏宽度加载分化的图纸;当页面宽度 在 320px 到 640px 之内时加载 minpic.png;当页面宽度超过 640px 时加载 middle.png
<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
    <source media="(min-width: 640px)" srcset="img/middle.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

2. 之类栗子中增加了显示器的趋向作为标准;当荧屏方向为横屏方向时加载_landscape.png 结尾的图形;当显示器方向为竖屏方向时加载 _portrait.png 结尾的图片;

<picture>
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
    <source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
    <source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>
  1. 如下栗子中增多了显示屏像素密度作为基准;当像素密度为 2x 时加载_retina.png 2x 的图形,当像素密度为 1x 时加载无 retina 后缀的图样;

    this is a picture
  2. 正如栗子中加多图片文件格式作为基准, 当补助 webp 格式图片时加载 webp 格式图片,当不援救时加载 png 格式图片;

    this is a picture

5. 如下例子中增添宽度描述;页面会基于当下尺寸选择加载不高于当前小幅度的最大的图纸;

<img src="picture-160.png" alt="this is a picture"
     sizes="90vw" 
     srcset="picture-160.png 160w,
             picture-320.png 320w,
             picture-640.png 640w,
             picture-1280.png 1280w">
  1. 如下例子中增添 sizes 属性;当窗口宽度大于等于 800px 时加载对应版本的图形;

         sizes="90vw" 
         srcset="picture-landscape-640.png 640w,
                 picture-landscape-1280.png 1280w,
                 picture-landscape-2560.png 2560w">
    

    this is a picture

      sizes="90vw" 
      srcset="picture-160.png 160w,
              picture-320.png 320w,
              picture-640.png 640w,
              picture-1280.png 1280w">
    

兼容性:

现阶段只有 Chrome , Firefox , Opera 对其包容性较好,具体包容性如图:

必威 12

包容性暗中提示图

优点:

  1. 加载适当大小的图像文件,使可用带宽获得丰裕利用;
  2. 加载不一致剪裁并具备差别横纵比的图像,以适应分化幅度的布局变化;
  3. 加载越来越高的像素密度,展现越来越高分辨率的图像;

步骤:

  1. 创建<picture></picture>标签;
  2. 在那个标签内创设叁个您想用来推行别的三个特色的<source></scource>标签;
  3. 丰硕贰个 media 属性,用来含有你想要的性状,如宽度(max-width,min-width),方向(orientation)等;
  4. 加上一个 srcset 属性,属性值为相应的图像文件名称,实行加载。假如您想提供分歧的像素密度,例如Retina 显示屏,能够增加额外的文本名到 srcset 属性中;
  5. 加上一个回落的<img>标签;

javascript技术方案

  • 基于jquery的HiSRC插件,能够依赖网速和是还是不是为retina屏来显示图片。
<div class="hisrc">
 <img src="placehold.it/200x100.png" data-1x="placehold.it/400x200.png" data-2x="placehold.it/800x400.png">
</div>

下一场调用hisrc的措施

$(document).ready(function(){
  $(".hisrc img").hisrc();
})

法定文书档案是这么介绍HiSRC怎么样职业的:正常境况下会直接加载src中的财富;假如网速较好就能够加载data-1x中的能源代替原先src的文件;假如设备像素比又相比较高的话,就能够加载data-2x中的能源代替本来的src中的图片。

它还提供选项允许大家设置二个网速基准。这一个html的结构让自家情不自尽想起了lazyload的缓慢解决方案,那俩真的是太相像了,我们完全可以给src中放一个联合的占位图,然后再去挑选加载符合浏览器展示的图形。

除此以外还大概有用于rails的gem包:hisrc-rails.
就此也得以写成那样

responsive_image_tag("http://placehold.it/100x100", :'1x' => "http://placehold.it/200x200", :'2x' => "http://placehold.it/400x400")

对此那么些方案,个人认为在工程上选用是能够期望的,因为图片都献身七牛那儿,能够图片上传成功后从2倍图中拍卖出1倍图,然后再向img标签中增添data-1x,data-2x那样的质量,可是呢,那如同把专业差非常少全体丰硕给了后台的弟兄,想到那儿,好像应用的难度须臾间增大了吧。。。

  • picturefill方案,重视picturefill.js这一个剧本文件,何况它还对结构有早晚的渴求,对格式有一定的渴求,最开端那个来自于对<picture>的支撑。
<picture>
     <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)"> 
     <source srcset="default.jpg, default_retina.jpg 2x"> 
     <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

必威 13

<picture> element兼容性

观望该组织要写这么多代码,多少就能够产生一些观念抗拒,可是呢本着技术升高的千姿百态,依旧再进一步研讨下。
鉴于picture成分是html5的新产物,宽容性上还不是特意好,要想大面积使用能够协作picturefill.js,别的将来picturefill也支撑有srcset属性的img。
那边有picturefill在选用<picture>的页面中留存的部分标题 。
//首假如IE9和安卓2.3上设有一点问题,不过IE9通过hack方法也是足以挽救的。

最后,两句话介绍一下服务端应用方案:
Adaptive Images:最大败笔基于PHP和Apache。它是阻碍通过服务器的图形央浼来生成图片,即使图片是经过第三方的分网互连网的也就用不上了。

背景图片

如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变:
如果 background-size 属性设置为 "100% 100%" ,背景图片将延展覆盖整个区域
如果 background-size 属性设置为 "cover",则会把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。

打赏帮忙自个儿写出愈来愈多好小说,多谢!

任选一种支付情势

必威 14 必威 15

2 赞 14 收藏 5 评论

必威 16

<picture>的办事原理


  • <picture>语法

由地点的亲自去做代码可以预知,在一直不引进 js 和第三方库,CSS 中从不满含 media queries 的场馆下,<picture>要素得以完结只用 HTML 来声称响应式图片;

  • <source>元素

<picture>标签它本身并没有品质。奇妙的地点是 <picture>被用来作为<source>的容器。
<source>要素,是用来加载多媒体的举例说录制和旋律,已经被更新用到图片的加载并且有个别新的属性已经被加上:

  • srcset (必需)

经受单一的图形文件路线 (如:srcset=”img/minpic.png”).
要么是逗号分隔的用像素密度描述的图形路线(如:srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默许不应用的。

  • media (可选)

收受其余声明的 media query, 你能够看出在 CSS @media 选用器 (如:media=”(min-width: 320px)”).
在事先的<picture>语法的例子里已经运用了。

  • sizes(可选)

收起单一的幅度描述 (如:sizes=”100vw”) 大概纯粹的 media query 宽度描述 (如:sizes=”(min-width: 320px) 100vw”).

照旧逗号分隔的 media query 对步长的描述 (如:sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)”) 最终的贰个被充作默许的。

  • type(可选)

经受援助的 MIME 类型 (如: type=”image/webp” or type=”image/vnd.ms-photo”)

浏览器会依附这个指示和总体性来加载确切的图样能源。依照标签的列表顺序。浏览器会利用第二个符合的<source>要素并忽视掉前边的<source>标签。

  • 增加最后的<img>元素

<img>元素在<picture>中间用来当浏览器不援助时仍旧未有源标签相称时的呈现。在 <picture>内使用<img>标签是必得得,倘令你忘记了,将不会有图表显示出来。

<img>来声称暗中认可的图样展现。将<img>标签放到<picture>内的最终,浏览器在找到<img>标签从前会忽视<source>的表明。那几个图形标签也急需你写上它的 alt 属性。

CSS应用方案——媒体询问

最小胜笔:只好用来css,所以也就限制了唯有background中的图片可以利用此格局。
简要介绍一下:

@media 
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (-min-moz-device-pixel-ratio:2),//版本低于16的Firefox
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi){
...
}

像七牛那样职业的图样管理利用都足以根据必要生成一倍图,这样对于区别分辨率的显示屏,也得以接纳分裂分辨率的图形。别的的阙如是应用媒体询问多了数不胜数代码,当中利弊,具体情形下再权衡吧。

resolution :定义设备的分辨率。

必威 17

resolution兼容性

dppx:也是器械像素比,和dpr一样。
dpi:(Dots Per Inch)每英寸点数。
1dppx=96dpi
【小科普:1参阅像素即为从一臂之遥看分析度为96DPI的装置出口即1英寸96点)时,1点(即1/6英寸)的观点。 】

别的,在新型的以webkit为基石的浏览器中,扶助帮忙CSS4的background-image新标准草案image-set,在活动端也勉强尚可吗。

必威 18

image-set属性宽容性

selector {
  background-image: url(no-image-set.png);
  background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}

不帮助image-set的浏览器会剖析background-image中的背景图像;扶助image-set的浏览器就能够依照是还是不是为retina屏接纳相应的背景图,因而这些方案是能够实现向下包容的。

video

原文
“响应式(Responsive)”这么些词作者想大家未有听过1000遍,也是有九18回了。响应式是指达成不一致屏幕分辨率的极限上浏览网页的两样展现方式。网络介绍响应式的小说也许有非常多了,比方:《自适应页面设计》。在那篇小说中,我们不讲页面布局的响应式,我们第一来探视“响应式图片”。那篇小说重要内容:
何以要动用响应式图片

参考:

http://www.tuicool.com/articles/ZraMfa
http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
http://www.w3cplus.com/responsive/understanding-responsive-web-design-how-to-manage-images.html
http://scottjehl.github.io/picturefill
https://www.ze3kr.com/2015/08/using-srcset/#section-6

使用 max-width 属性

万一 max-width 属性设置为 百分之百, 摄像播放器会依赖荧屏自动调度比例,但不会超过其本来面目大小:

video {
    max-width: 100%;
    height: auto;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1、为什么要接纳响应式图片
假诺有一张图片的展现上升的幅度为200px,那么,它在 1x
(即设备像素比为 1 的显示器) 的荧屏上,是占了 200 个概况像素(即事实上所占的像素);它在 2x
的显示器上,实际上是占了 400 个大要像素;在 3x
的荧屏上,实际上是占了 600 个轮廓像素;在 4x
的显示屏上正是占了 800 个大意像素。
假如那个图形只提供 200 像素的尺寸,那么在 2x~4x 的显示屏上看起来就很模糊。若是只提供 800 像素的本子,那么在 1x~3x 的器具上会显得多余,因为加载时间会相较长,所以大家要采用响应式图片。
作者们有二种艺术来安装响应式图片:
使用<picture>元素(HTML5新增)

综上

而是既然picturefill也援救srcset,那么相比srcset属性和picture成分,浏览器对srcset属性的支撑是越来越好的。所以srcset+sizes+w的img成分同盟picturefill.js效果应该会正确。只是很心痛,那样的接纳案例还平昔不找到。可是固然picturefill.js不可能全面合作srcset方案,仅仅使用srcset+sizes+w就足以应付主流今世浏览器了,重要的是,这么些方案完全也是向下宽容的啊。

成立响应式网格视图

接下去大家来成立一个响应式网格视图。

先是保障全数的 HTML 成分皆有 box-sizing 属性且设置为 border-box

保障边距和边框富含在要素的增进率和惊世间。

增加如下代码:

* {
    box-sizing: border-box;
}

本文由必威发布于必威-前端,转载请注明出处:那么就会一个物理像素对应4个位图像素必威,我

相关阅读