zoukankan      html  css  js  c++  java
  • bootstrap之响应式布局

    1.手动配置viewport

       在HTML中:

    1 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

       以上代码的作用是:让viewport的宽度等于当前设备的宽度,同时不允许用户手动缩放,其中initial-scale=1.0和maximum-scale=1.0不是必须要添加的,需要根据用户需求,其中width=device-width是必须的,这样可以保证不会出现横向滚动条。

     meta viewport的属性:

      width:设置layout viewport的宽度,为正整数也可以为“device-width”的字符串;

      height:设置layout viewpor的高度,很少用;

      initial-scale:设置页面初始缩放比例,可以为小数;

      maximum-scale:页面的最大缩放比例;

      minimum-scale:页面的最小缩放比例;

      user-scalable:是否允许用户缩放,值为yes或no,当不允许用户手动缩放时则不需添加minimum-scale和maximum-scale。

    2.媒体查询

    在HTML代码中:

    1 <link rel="stylesheet" media="(max-480px)" href="mobile.css">

    以上代码的意思是如果viewport的max-width=480px被满足了,则使用mobile.css的样式。

    以上代码的功能还可以通过@media(max-width:480px){...}来实现,将其放在被引入css样式的代码中。

    3.媒体类型

      all 用于所有设备;print用于打印机;projection用于方案展示,比如幻灯片;screen用于电脑显示器;等

    4.媒体特性

      参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

      例如:@media(orientation:portrait){..}

      aspect-ratio 可视化宽高比   例如:aspect-ratio:3/2 ;  3为宽比例  2为高比例 ,同时支持max和min;

      device-aspect-ratio 设备可视化宽高比,用法同上;注意窗口不等于可视窗口

      orientation 设备的使用方向   例如:orientation:landscape;landscape为水平方向,portrait为垂直方向;

      height 可视化窗口高度  ;device-height 窗口高度(判断设备宽高),支持max和min;

      width&0device-width用法同上;

    4.操作符

      使用and可以将不同的媒体特性组合在一起,即可以包含一个媒体类型和多个媒体表达式

    1 @media screen and (min-480px){..};

     使用,逗号可以分隔不同的媒体查询,相当于 or

    @media screen and(max-980px),screen and(min-480px){..}

     使用not操作符,用于排除特定的媒体类型,使用not操作符时一定要指定媒体类型,如果没有指定媒体类型,会永远返回假的值

    @media not screen and (min-700px){...}

      以上代码是先判断min-width然后才使用not

    使用only操作符,用于指定特定的媒体类型,可以用来排除不支持媒体查询的浏览器。

  • 相关阅读:
    多线程锁--怎么理解Condition
    ThreadPoolExecutor
    ThreadFactory
    java内部类的初始化
    Android Private Libraries 和 Dependencies的区别
    Android严苛模式StrictMode使用详解
    [法律法规]《网络安全等级保护条例(征求意见稿)》
    [法律法规]中华人民共和国网络安全法
    Sqlserver tablediff的简单使用
    Sqlserver 命令行方式修改 用户密码的方法
  • 原文地址:https://www.cnblogs.com/chenpiaoxiaowu/p/11448770.html
Copyright © 2011-2022 走看看