zoukankan      html  css  js  c++  java
  • 通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js

    @media all and (min-1280px){
         /* 所有设备宽度大于1280干嘛干嘛嘞... */ 
         body{
              background:#f00;
         }
    }
    
    @media (min-1280px){
         /* 所有设备宽度大于1280干嘛干嘛嘞... */ 
         body{
              background:#f00;
         }
    }
    其中all and可省略
    @media print{
        /*打印时设置的样式*/
        body{
            background:pink;
        }
    }
    
    插曲:
    Lake Hillier is a lake in Western Australia that is completely and naturally PINK!!!
    @media screen\,screen9{
        /*IE 8 、IE 7上场了*/
        body{
             background:#ccc;
        }
    }
    
    @media screen9{
        /*IE7来了*/
       body{
          background:#0f0;
       }
    }

    屏幕分辨率

    指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率,如iphone6/6s的分辨率:1334*750(这里的1像素指的是物理设备的1个像素点)其他机型的分辨率见http://blog.csdn.net/qq_27080247/article/details/78665450

    iphone6/6s的deviceRatio为2(获取deviceRatio的方法见:https://www.w3cplus.com/css/towards-retina-web.html),此处有一公式:

    window.devicePixelRatio = 物理像素/dips(CSS像素被称为与设备无关的像素----device-independent像素,简称为“DIPs”)

    iphone6/6s的分辨率:1334*750  

    iphone6/6s的deviceRatio:2

    因此:dips=667px*375px(也就是设备屏幕高度*宽度),各浏览器的模拟器中展示的即为设备屏幕宽度*设置屏幕高度(css像素,获取方法:window.innerWidth*window.innerHeight)

    iPhone6屏宽不一定是375px,iPhone6 Plus屏宽不一定是414px。

    iPhone系列设备媒体查询:

    @media only screen and (min-device- 320px){
             //针对iPhone 3
    }
     
    @media only screen and (min-device- 320px)and (-webkit-min-device-pixel-ratio: 2) {
             //针对iPhone 4, 5c,5s, 所有iPhone6的放大模式,个别iPhone6的标准模式
    }
    @media only screen and (min-device- 375px)and (-webkit-min-device-pixel-ratio: 2) {
         //针对大多数iPhone6的标准模式
    }
     
    @media only screen and (min-device- 375px)and (-webkit-min-device-pixel-ratio: 3) {
          //针对所有iPhone6+的放大模式
     
    }
    @media only screen and (min-device-412px) and (-webkit-min-device-pixel-ratio: 3) {
          //针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px,可一并处理
     
    }
    /*iPhoneX的适配*/
    @media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
      header { background-color: black; }
    }
    /*iPhone8P的适配*/
    @media only screen and (device- 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
      header { background-color: deepskyblue; }
    }

     

    参考:

    iphoneX适配方案(各机型分辨率,缺少iphone6 plus分辨率:标准模式下设备宽度为414px*812,分辨率为2436*1242px=414px*3,有实例)

    走向视网膜(Retina)的WEB时代

    iPhone6屏宽不一定是375px,iPhone6 Plus屏宽不一定是414px(判断iphone6 plus/iphone6标准及放大模式)

    关于h5页面在iphoneX中的适配(各机型开发尺寸,较全)

    Human Interface Guidelines 

    design website for iphoneX

    手淘移动端适配的方案学习和相关思考(flexible.js源码分析)

  • 相关阅读:
    js01
    js---18miniJquery
    js---17继承中方法属性的重写
    js---16继承
    js---16原型链
    js---15深拷贝浅拷贝 原型链
    js---14公有私有成员方法
    js---13 this call apply
    js---12对象创建方式,构造器,原型
    ESXi导出的CentOS7 ovf文件导入到workstation 无法打开GUI登录界面的问题解决方案
  • 原文地址:https://www.cnblogs.com/loveamyforever/p/7965994.html
Copyright © 2011-2022 走看看