【利用media query让背景图适应不同分辨率的设备】的更多相关文章

利用media query让背景图适应不同分辨率的设备

随着上网方式的多样化,用户选择上网的工具不再仅是PC,而可以是手机,或者平板电脑.随之而来的问题是如何让网页适应不同分辨率,这给前端工程师们带来了新的挑战,其中重要的一点是如何让图片能在不同的分辨率下都能给用户带来良好的用户体验? 方法概述 CSS3中的media query属性让我们可以根据浏览器的高宽,设备的像素比等来使用不同的CSS.当然它还一些别的用法,具体请参考这里. device-pixel-ratio是media query一查询条件,用于获得设备的像素比.一般来说iPhone4/…

利用css3的多背景图属性实现幻灯片切换效果

css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css代码,就给.box元素添加了三张背景图,而正因为有了这样一个功能,我们可以利用不停的变换这三张背景图的位置来实现幻灯片切换的效果. html代码非常精简,如下: <body> <div class="box"> </div> </body>…

采用CSS3 Media Query技术适应Android平板屏幕分辨率和屏幕像素密度

采用HTML5在开发移动应用程序满足各种需求Android分辨率和屏幕的平板设备密度,这是非常麻烦的过程,最终的解决方案是使用css media query,匹配相同的时间分辨率和屏幕像素密度.上进行兼容性測试,终于保证在多数Android平板上都能较好的显示. 一个典型的针对设备的Css Media Query写法例如以下.能够保证页面高度充满屏幕,简单的设置height:100%是不行的. //SAMSUNG N5100, Nexus7 1, @media only screen and (…

利用media query写响应式布局

最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/8293011这篇文章. 简单记录一下用css写响应式布局的方法.大概可以这么理解,通过判断屏幕的大小来调整css的样式从而达到适应不同屏幕的目的. 首先先贴一个html,css都放在同级的css文件夹下面,因为有个简单的轮播,所以要引入jquery <!DOCTYPE html> <html>…

media query ie8- 兼容实现总结

虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应:但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又适合小尺寸的手机终端是挑战 :同时高分辨率下pc页面信息量巨大,对于手机端用户是否需要,也许会造成带宽浪费;再者手机终端和pc终端的用户操作习惯也相差甚大,这种多图多信息量要求精准的页面,设计出来恐怕会是2个完全不同的版本,也许各自维护更方便.由于业务形态原因,随着用户分辨率的提高,1024x768已…

media type与media query

media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一.随着移动互联网的发展,media query开始得到大家的重视. media type 让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的media type会是all 和screen,然后是print,一些网站会专门通…

在javascript中使用媒体查询media query

由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: type is not include 'on', for example: click mouseover mouseout and so on addHandler: function(element, type, handler){ if (element.addEventListener){ e…

media query(媒体查询)和media type(媒体类型)

media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一.随着移动互联网的发展,media query开始得到大家的重视. media type 让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的media type会是all 和screen,然后是print,一些网站会专门通…

css Media Query详解

Media Queries详解 Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 1 <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> 2 <link href="css/style.css" rel="style…

CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式   Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式. 首先来看一个简单的实例: 复制代码 代码如下: <link rel="stylesheet" media…