求助webapp响应式布局 背景图片和普通图片如何自适应?

问题描述

求助webapp响应式布局 背景图片和普通图片如何自适应?

求助webapp响应式布局 背景图片和普通图片如何自适应?
用CSS 如何自适应?因为图片高度和宽度有固定比例 如果就设置width和height为100%
即使图片高清 但碰到不同尺寸设备 图片自动占据全屏 会改变图片比例尺 会影响吧?请问这个问题CSS 怎么解决?谢谢

解决方案

IMG加载的图片width设置为100%,高度会按照width的值自动等比率缩放

背景图片用background-size 属性来控制缩放

 div{
   background:#00ff00 url(img.jpg) no-repeat;
   background-size:60% 80%;
   -moz-background-size:60% 80%;
   -webkit-background-size:60% 80%;
   -o-background-size:60% 80%;
}

http://blog.sina.com.cn/s/blog_475e4b9b0100vpeb.html

时间: 2024-01-07 02:41:24

求助webapp响应式布局 背景图片和普通图片如何自适应?的相关文章

求助webapp响应式布局

问题描述 求助webapp响应式布局 请问我如果想用rem来移动端全部布局可以吗?全部代替百分比? 另外不同设备默认的font-size不同 是否只要在html根标签中申明font-size=100% 然后全局使用rem即可?或者还有什么办法? 解决方案 html设置好一个参考值,用rem就行http://www.w3cplus.com/css3/define-font-size-with-css3-rem

什么是响应式布局、响应式布局该如何设计

文章简介:今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media Query实现响应布局). 讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media

响应式布局该怎么设计?CSS3 Media Query实现响应布局

文章简介:响应式布局的小事就这么多,如你有好的补充意见或不同的见解,可以联系我,我们一起探讨这件小事-- 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布

响应式布局在邮件中的实现

2010年, Ethan Marcotte 提出了响应式布局--一个网站兼容多个终端的概念.而响应式邮件,则是一 封邮件兼容多个终端. 根据ExtactTarget在2012年针对各个年龄段希望接受营销信息的方式调查表明 ,电子邮件是客户愿意接受营销信息的主要方式. 电子邮件营销中, 电子邮件内容是非常重要的一环 .由于人们习惯的浏览式阅读模式,一封设计优秀.有品牌识别度的邮件比一封纯文字邮件更能引起客户的关 注.从ReturnPath最近的调查[i]中又可以看出,人们已经逐渐习惯在移动端进行邮

浅谈html5 响应式布局

 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.       这个概念是为解决移动互联网浏览而诞生的.响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过.  随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 二.响应式布局有哪些优点和缺点?   优点:

响应式布局该怎么设计

     讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容

响应式布局这件小事 设计师如何实现响应布局

讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端-

必须收藏14款响应式布局的前端开发框架

前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费的时间更长. 本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程.针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件.几乎所有的框架都采用了响应式网格系统. 使用这些前端框架,有如下好处: 跨浏览器.这一点已被证实. 一致性.UI组件,如导航.按钮.标签.表

移动端rem响应式布局的例子

由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不用再为各种设备宽度不同而烦恼如何实现自适应的问题. rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.1rem=16px(浏览器html的像素,可以设定这个基准值),假如浏览器的html设为64px,则下面的元素则1rem=64px来运算. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这个