美文网首页
css3媒体查询初体验

css3媒体查询初体验

作者: 潘杉杉_06_03 | 来源:发表于2018-11-26 14:02 被阅读13次

@media

媒体查询能够使浏览器根据不同尺寸的设备读取不同 css 文本。

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue
    }
}

如果打开机器浏览器宽度小于等于 300 那么背景色将会是 lightblue

例子:

一个在大屏手机上正常显示的网页,在小屏手机上显示不全,需要滚动,这时一套 css 就不能满足要求,需要我们用以上技术来为小屏手机定制 css

大屏手机:

pc-browser

小屏手机:

如 iPhoneSE

phone

这时我们需要用媒体查询来修复这个问题让他在小屏手机上能正常工作

@media screen and (max-width: 321px) {
    .small-media{
        height: 140px;
        overflow-y: scroll;
    }
}

在动态生成的页面加上类名 small-media

var productB = '\
<div class="small-media">\
<div class="butler_account_munber sub_div_mt10"> 账套数: <div index="0" userCount="10">10用户50账套</div> <div index="1" userCount="50">50用户100账套</div> <div index="2" userCount="200">200用户200账套</div> <div index="3" userCount="500">500用户500账套</div> <div index="4" userCount="1000">1000用户1000账套</div> <div index="5" userCount="2000">2000用户2000账套</div> <div index="6" userCount="3000">3000用户3000账套</div> <div index="7" userCount="4000">4000用户4000账套</div> <div index="8" userCount="5000">5000用户5000账套</div> </div>\
<div class="butler_period_validity"> 有效期: <div>1年</div> <div>2年</div> <div>3年</div> <div>4年</div> <div>5年</div></div>\
<div class="butler_count"> 数量: <div>1</div></div>\
</div>\
'

这样一来在小屏手机上就能滚动

效果:

fix-image

(完)

github

相关文章

  • CSS 响应设计-媒体查询

    1、响应式 Web 设计 - 媒体查询 媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询...

  • 浅谈CSS3 响应式布局--Media Queries

    CSS3 Media Queries , CSS3媒体查询。使用 @media 查询,你可以针对不同的媒体类型定义...

  • CSS3 媒体查询

    1、CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,C...

  • CSS3响应式开发

    CSS3多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3...

  • css3媒体查询初体验

    @media 媒体查询能够使浏览器根据不同尺寸的设备读取不同 css 文本。 如 如果打开机器浏览器宽度小于等于 ...

  • Media queries

    CSS3提供了多种媒体查询的方式 通过dpi

  • IE8 兼容性处理

    Doctype Meta 媒体查询支持 Respond.js CSS3 支持 CSS3 PIE,它支持的特性有这些...

  • 媒体查询

    媒体查询是CSS3添加的新功能。在移动端适配开发中发挥着强大的作用。接下介绍一下媒体查询的用法。 使用 媒体查询有...

  • CSS3中的媒体查询

    一、为什么需要媒体查询 CSS3的媒体查询模块就是为了针对设备特性(width、height等)设置特定的css样...

  • CSS3多媒体查询

    CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示...

网友评论

      本文标题:css3媒体查询初体验

      本文链接:https://www.haomeiwen.com/subject/likbqqtx.html