`
zhangyaochun
  • 浏览: 2620734 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

media query的兼容实现

阅读更多
  • ipad及以下,所有小于、不等于960宽度的平板电脑

         @media only screen and (max-width:959px){}

 

  • 仅ipad竖版,所有小于(不等于)960宽度的平板电脑竖版

         @media only screen and (min-width:768px) and (max-width:959px){}

 

  • iphone及以下

         @media only screen and (max-width:767px){}

 

  • 仅iphone 横版,包括某些平板电脑的竖版

         @media only screen and (min-width:480px) and (max-width:767px){}

 

  • 仅iphone4竖版

         @media only screen and (max-width:479px){}

 

 

  • 竖屏下

       @media all and (orientation:portrait){}

 

  • 横屏下

       @media all and (orientation:landscape){}

分享到:
评论

相关推荐

    让@media screen兼容ie8/ie7/ie6

    Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒介查询,亲测可用。(注意:需要大家放到服务器上再使用,不能跨域使用,放到虚拟空间中也可以进行测试,本地测试ie6-8无效果)

    CSS3 Media Query CSS3媒介查询

    总而言之,CSS3 Media Queries是现代Web开发中不可或缺的一部分,它为创建跨平台、多设备兼容的响应式网站提供了强大的支持。通过深入了解和熟练运用Media Queries,开发者能够构建出更具前瞻性和用户体验的网页设计...

    简单介绍CSS3中Media Query的使用

    CSS3中的Media Query是网页设计中的一个重要工具,它允许开发者根据设备特性,如视口宽度、设备像素比等,来应用不同的...在实际项目中,Media Query常常与Flexbox或Grid布局配合使用,以实现更复杂的响应式设计需求。

    Respond.js让IE6-8 支持 CSS3 Media Query

    NULL 博文链接:https://liuna718-163-com.iteye.com/blog/1880369

    Flutter 不同终端适配方案

    Flutter 提供了多种屏幕适配方案,例如使用 MediaQuery、LayoutBuilder、FittedBox 等Widget 来实现屏幕适配。然而,这些方法都有其局限性,例如 MediaQuery 只能获取当前屏幕的宽高,而 LayoutBuilder 和 ...

    animeta-Mediaquery

    在IT行业中,特别是Web开发领域,"animeta-Mediaquery" 指的是一种利用CSS Media Queries技术来实现动漫媒体查询的应用。这个标题暗示我们将会探讨如何为不同的设备和屏幕尺寸设计适应性的动漫效果,特别是在HTML...

    vue-media-query-mixin-Vue 2媒体查询mixin,可在组件js和组件模板中使用。 与引导程序和可视化视口兼容。 如果屏幕宽度为xs,则wXS返回;如果屏幕宽度为sm,则wSM返回true,等等。-Vue.js开发

    vue-media-query-mixin一个vue mixin,用于获取当前的媒体查询xs,sm,md,lg和xl。 安装NPM npm安装vue-media-query-mixin YARN纱添加vue-media-query-mixin Vue mixin可以获取当前的媒体查询xs,sm,md,lg和xl。 ...

    mediaQuery

    Bootstrap、Flexbox和Grid布局系统都依赖于媒体查询来实现多设备兼容性。 6. **实例分析**:在"mediaQuery-master"项目中,可能会包含不同分辨率或设备的CSS样式文件,比如`style.css`和`mobile.css`。通过媒体查询...

    响应式布局(PC与手机访问的兼容性)详解

    通过CSS3中的Media Query等技术手段,开发者可以轻松地实现灵活、高效的响应式设计。然而,在实现过程中也需要注意平衡性能与用户体验之间的关系,避免过度复杂化设计而带来的负面影响。随着移动互联网的不断发展和...

    core-media-query:数据绑定到 CSS 媒体查询

    在 Polymer 0.5 及更早版本中,`core-media-query` 是一个组件,它帮助开发者更方便地实现媒体查询的数据绑定,以实现更加灵活和智能的用户界面适应性。 在Web开发中,媒体查询是CSS3的一个重要特性,通过`@media`...

    simple_media_query:一个简单的媒体查询

    本篇文章将围绕“simple_media_query”这个项目,深入探讨如何利用CSS中的媒体查询实现灵活多变的布局,以适应不同设备和屏幕尺寸的需求。 媒体查询(Media Queries)是CSS3的一个重要特性,它允许我们根据设备的...

    响应式布局

    总的来说,响应式布局是现代网页设计的基石,它借助Media Query等技术实现了跨设备的兼容性和优化的用户体验。然而,设计响应式布局需要考虑诸多因素,包括性能、代码简洁性以及用户体验,因此,设计师和开发者需要...

    ie兼容媒体查询

    "ie兼容媒体查询ie8"这个主题聚焦于如何在IE8这样的旧版浏览器中实现媒体查询(Media Queries),这是响应式网页设计的关键技术。媒体查询允许内容根据设备特性和视口大小来适配显示,从而为不同的设备提供优化的...

    jqprint打印js及兼容解决

    为了解决这个问题,可以创建专门针对打印的CSS媒体查询(`@media print`),以确保打印时元素的样式正确。 4. **处理图片和背景色**:部分浏览器可能不会加载打印时的图片或背景颜色。可以在`jqPrint`调用前,临时...

    css响应式有哪些常用布局_css响应式有什么布局.docx

    通过Media Query,开发者可以精细控制不同设备上的布局和样式,从而实现响应式设计。需要注意的是,为了优化性能,应该避免使用过多的Media Queries和隐藏内容,同时考虑使用流式布局、弹性盒模型(Flexbox)或网格...

    portfolio-media-query-error

    在网页设计中,媒体查询(Media Queries)是CSS3中的一个重要特性,用于实现响应式设计。"portfolio-media-query-error"这个标题暗示了我们可能在处理一个包含媒体查询的个人作品集网页时遇到了问题。响应式设计是...

    html5 微信图片浏览效果 兼容PC和手机端

    4. **Media Query**: CSS3的媒体查询可以让我们根据设备屏幕尺寸应用不同的样式,实现响应式布局,确保在不同设备上图片都能正确显示。 5. **触控事件**: 对于手机端,HTML5提供了`touchstart`, `touchmove`, 和 `...

    query 图片切换

    5. **响应式设计**:现代Web应用需要考虑多设备兼容性,因此图片切换功能应该支持响应式设计。这可能需要使用CSS的媒体查询(`@media`)来根据设备屏幕尺寸调整图片布局和切换效果。 6. **懒加载**:对于大型图片集...

    在高分辨率屏幕中实现1px border效果.pdf

    在文档中还提到了使用MediaQuery做兼容性处理。MediaQuery是CSS中的媒体查询,可以根据不同的设备特性应用不同的样式。通过MediaQuery判断设备的像素比,可以对视网膜屏幕做专门的适配。 最后,还提到了onepx.js这...

Global site tag (gtag.js) - Google Analytics