w3ctech

在响应式里关于图片该如何处理

现在刚学习响应式,还有很多问题不懂 我们可以根据 media属性判断不同屏幕宽度, 调用不同css, 比如: “ media="screen and (min-width: 481px) and (max-width: 640px)" 时候调用href="style/common_640.css" ” 问题一:图片的路径是写在HTML里面的,我怎么根据不同屏幕宽度加载不同的图片呢,还是有别的办法实现图片响应式呢。 问题二:字体的响应式怎么处理?我在网上看到有人用vw作为字体的单位,这个解决方法好不?

前端圈微信

扫码关注前端圈微信公众号

共收到6条回复

  • 你这个全写在一行,让人阅读很痛苦哈,你多给几个回车呀。

    关于图片,你可以为你的图片设置css:max-width:100%。

    如果你想换图片,现在标准正在制定中,同时你也可以去搜一些“响应式图片”,应该有一些JS库来解决。

    字体大小的话,如果你主要是兼容手机上的话,你可以使用rem。

    如果是兼容所有浏览器,那你就配合media query + 字体大小设置吧。

    回复此楼
  • 波大威武,多谢了。偶马上去查图片的解决方法和rem的用法

    回复此楼
  • http://efe.baidu.com/blog/responsive-images-in-practice/ 哈哈,这里有一篇实战响应式图片的文章,可以看看

    回复此楼
  • <div style="position: relative;"><img src='./img/img.png' width='400px' height='200px' style="display: block;width: 100%;height: auto;overflow: hidden;"></div>

    我是这么干的(当然实际工作中样式是分离出来的) 图片的大小按照需求给定,这样会根据外层div的宽度自动适应高度,这样就有了自适应的宽高。

    回复此楼
  • 我目前也是这么处理的,哈哈……

    回复此楼
  • 波大给的那个链接处理方法比较好,虽然看得懵懵懂懂,但是做了个例子,果然是我想要的效果,看不懂的正在慢慢学习中。

    回复此楼