zoukankan      html  css  js  c++  java
  • Media Query-响应式布局

    做响应式网站的时候,一定要在页面头部加入如下的声明:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    

      

    width=device-width 样式中定义的宽度等于设备中定义的宽度

    initial-scale=1.0 缩放比例1

    minimum-scale=1.0 最大缩小比例1

    maximum-scale=1.0 最大放大比例1

      上段代码的最终作用是,移动客户端会按你设定的尺寸来显示页面。并且比例是1,不可通过手势放大缩小。 如果不写这段代码,移动客户端的浏览器真的会以它的1px来显示你设定的1px。最终效果是被缩放的效果,字小小的那种。 总之,做响应式网站的时候记得至少要加上如下声明。

    什么是Media Query?

    CSS2允许用户对特定media类型制定样式。

    例如: 针对screen(屏幕)用 @media screen{ ... }里设定的样式。 针对打印样式用 @media print{ ... } 里的样式。

    CSS3提供了更加强大的功能。 可以针对不同media类型设置样式,还根据设定的宽度或者高度指定样式。

    @media screen and (max- 500px) {  
         body { background-color: black;    }
    }
    

     意思就是: 当屏幕的宽度小于等于500px的时候body的背景颜色为黑色。

     

    相关英语

    viewport = 视口

    content = 内容

    device-width = 设备宽度

    initial-scale = 初始-比例

    minimum-scale = 最小-比例

    maximum-scale = 最大-比例

    media = 媒体

    query = 查询


    仅供学习参考,原文链接:https://www.cnblogs.com/luoruiyuan/articles/5482042.html

  • 相关阅读:
    每天学习Linux之-系统启动过程
    差模和共模干扰
    每天学习Linux之-目录结构
    欧姆龙CP1H 原点搜索和原点返回功能
    NPN,PNP接线总结
    MyBatis插件开发
    MyBatis运行原理
    MyBatis逆向工程
    MyBatis-Spring整合
    MyBatis缓存机制
  • 原文地址:https://www.cnblogs.com/zhangym118/p/9510173.html
Copyright © 2011-2022 走看看