码迷,mamicode.com
首页 > Web开发 > 详细

HTML H5响应式,表格,表单等

时间:2019-11-21 13:48:23      阅读:500      评论:0      收藏:0      [点我收藏+]

标签:dia   top   nbsp   响应式   port   窗口   ESS   alt   pre   

HTML杂项

 

响应式图片

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

  

属性srcset

  1. 一个文件名 (elva-fairy-480w.jpg.)
  2. 一个空格
  3. 图像的固有宽度(以像素为单位)(480w)——注意到这里使用w单位

属性sizes

  1. 一个媒体条件(max-width:480px))——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里,我们说“当可视窗口的宽度是480像素或更少”。
  2. 一个空格
  3. 当媒体条件为真时,图像将填充的槽的宽度440px

<picture>标签

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

  

HTML H5响应式,表格,表单等

标签:dia   top   nbsp   响应式   port   窗口   ESS   alt   pre   

原文地址:https://www.cnblogs.com/llll/p/11905052.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!