当前位置:首页 > 开发 > Web前端 > Jquery > 正文

css媒体查询/jquery mobile根据不同设备设定不同布局

发表于: 2012-03-16   作者:bozch   来源:转载   浏览次数:
摘要: 今天在学习jquery mobile的时候,发现css中有媒体查询这个概念,用他能够进行针对媒体设备设定不同的布局状态; 在单一文件下,css定义方式如下: @media (min-width: 1001px) { #sidebar ul li a:after { content: " (" attr(data-email) ")";

今天在学习jquery mobile的时候,发现css中有媒体查询这个概念,用他能够进行针对媒体设备设定不同的布局状态;

在单一文件下,css定义方式如下:

@media (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

@media (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

 

@media属性值在不同的宽度值时采取不同的样式。

 

 

如果在想在不同的设备下引入不同的css,可以做如下定义:

   

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" 
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" 
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">

实例可以参考:http://css-tricks.com/examples/MediaQueriesSidebar/

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

css媒体查询/jquery mobile根据不同设备设定不同布局

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5
能满足不同尺寸的移动设备(iphone/ipad/安卓手机)下,同一张图片自适应显示:当图片宽度大于设备宽
<script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script> <script
如 今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传
如 今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传
如 今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传
如 今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传
各式各样的社交媒体火了这么久,已经逐渐把整个世界都连到了一起。但其实分处地球村两端的中国和美
来自: www.guokr.com - FeedzShare 趣科技 - 果壳网 - FeedzShare 发布时间:2011年08月10日, 已有 2
<!doctype html> <html lang="zh"> <head> <meta http-equiv="Content-Type"
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号