zoukankan      html  css  js  c++  java
  • 【media-queries】媒体查询,为了响应式设计而生

    目录

    1. 简介
    2. 语法
    3. 常用尺寸

    一 简介

    针对现在纷杂的设备,css3中加入,可以查询你的浏览类型(screen彩色屏幕, print, all)和css属性判断。

    最常用的就是查询屏幕大小,给予适合的展示效果,即流行的响应式设计(Responsive Design)。

    二 语法

    1 简单的例子

    @media only screen and (max-320px) {
         .container {
           width:90%;
           padding:0 4%;
         }  
    }        

    前半部分是media-type查询,后面看做是css查询。

    2 如果是要大于320小于480像素

    @media only screen and (min-320px) and (max-width:480px) {
         .container {
            // style for  media(320px < width < 480px)
         }  
    }

    三 常用尺寸

     iphone4 safari视窗高度(window.innerHeight) 356px;

    iphone4 weixin视窗高度(打开网页时测算的window.innerHeight) 374px;

    iphone5 相关尺寸都加88px就行了。

    四 典型实例

    五 好的网站收藏

    http://2011.dconstruct.org/

    注意:

    1 max-width的宽,非屏幕的分辨率宽 

      买手机的时候,1280*800的像素,跟这里的max-width的像素值不是对应的。 因为android系统会自动进行放大,相当于在屏幕上有一个放大层,一个显示像素点可以有多个像素点组成,所以有的达到1280*800(如魅族mx2)但是不能显示的像1280*800浏览器显示的那么大,但是字体什么的显示的更加清晰。

    2 width跟device-width的区别

    width称为视口宽度,device-width称为屏幕宽度.

    meta的viewport中 width=device-width 即把浏览器宽度设置成屏幕宽度。

  • 相关阅读:
    执行脚本,且以脚本名保存log
    循环读取寄存器(QSFP-DD)并且分别保存log
    shell脚本添加脚本执行时间和当前运行次数current running time
    软件后门种植
    IPC$管道的利用与远程控制
    古典密码-维吉尼亚密码实验
    古典密码之乘法密码
    古典密码之凯撒密码
    密码破解工具Brutus
    ASPack壳脱壳实验
  • 原文地址:https://www.cnblogs.com/zzu-han/p/3170072.html
Copyright © 2011-2022 走看看