媒体查询--移动端1px解决方案

媒体查询

定义

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

应用场合：京东首页，响应式页面；

特征：
min-width; max-width; min-height; max-height
注意 写法： min-width:1000px

语法；@media 屏幕类型 and|not|only (特征)
案例：@media screen and (max-width:1000px);

实践方案1：在css中，同一个文件夹下

关键代码：

**

问题：如果媒体查询下的业务代码过多的时候？

**
实践方案2：使用link引入样式文件
语法：media = “媒体类型 and|not|only (媒体的特征)”

案例：

<link rel="stylesheet" href="01indexStyle2.css" media="screen and (max-width:1190px)">

注意：一开始就会加载这个样式文件，在屏幕小于1190px的情况下，会重新渲染页面样式。

常用特性

• 1、width / height 完全等于layout viewport
• 2、max-width / max-height 小于等于layout viewport
• 3、min-width / min-height 大于等于layout viewport
• 4、device-width / device-height 完全等于ideal viewport

问题：media中 width/height 和 device-width/device-height的区别？
解答：
width:视口宽度 | 网页宽度（视口指浏览器窗口内的内容区域，不包含工具栏，标签栏等）
height：视口高度 | 网页高度
device-width:渲染表面的宽度 | 设备分辨率宽度 （对我们来说，就是设备屏幕的宽度）
device-height:渲染表面的高度 | 设备分辨率高度（对我们来说，就是设备屏幕的高度）
总结：主要的区别就是设备。

经典案例：

www.jd.com
http://demo.cssmoban.com/cssthemes5/cpts_1335_cab/index.html

幻灯片，轮播图的改造

思路(需求)：页面大小发生变化的时候，幻灯片，轮播图也要发生响应的变化！
页面发生变化 == js监听那个事件？

// window.onresize = function () { };//不推荐使用
            // window.addEventListener("resize",function(){},false);//false,冒泡，true，捕获
            //$(window).resize(function () { });//-->$(window).bind(“resize”,function(){}); |  on("resize",function(){}); (on事件委托绑定，delegate)

            myTool.addEvent(window, "resize", function () {
                //思路：
                //1、页面宽度<=1190px，做一个判断；
                //2、轮播图容器的宽度发生变化，使用js控制幻灯片容器的宽度；
                //3、轮播图每次滚动的距离要更新；
                //4、在用户拖动页面的情况下，关闭定时器，放手之后开启定时器；
                //5、在用户拖动页面的情况下，滚动到第一张去；
                //6、如果是用户可配置变化的宽度（1190px），那么我们写在配置项中
            });

移动端1px解决方案

伪类
伪类有：:first-child ，?，:vistited，:hover:，active:focus，:lang

伪类元素
::first-line，: :first-letter，: :before，: :after

常用的
::before
在元素内容的最前面添加新内容。
::after
在元素内容的最后面添加新内容。

伪类和伪类元素的案例1：


伪类和伪类元素的案例2：

<div class="mod3">
            <h1>mod3,:after, ::after</h1>
        </div>

实际效果图：

提示 ：使用360浏览器来演示！

JS中查看设备的dpi

alert(window.devicePixelRatio);

代码案例：

移动端字体解决方案

rem定义

rem 相对长度单位，其参照根元素(html)字号大小 例如 html {font-size: 16px;} 则 1rem = 16px; html {font-size: 32px;} 则 1rem = 32px，0.5rem = 16px; 注：所有浏览器默认字号都是16px（某些安卓手机可以调置系统字号后，浏览器默认字号会受影响）

问题：1rem 等于多少像素？
解答：1rem=16px。

rem兼容性

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

rem适配

1.设置
2.设置页面元素宽度单位为 rem
注：此方案比较灵活，我们的案例将采用这种方案

rem使用方法

注意，rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可!
一般情况下，是这样子使用的:
html{font-size:62.5%;} body{font-size:12px;font-size:1.2rem ;} p{font-size:14px;font-size:1.4rem;}

案例：移动端-京东商品展示

字体缩放的方案：

使用纯rem演示…

提示：纯css实现的方案！注意顺序不能乱！

@media only screen and (min-width: 320px){
  html {
    font-size: 62.5% !important;
  }
}
@media only screen and (min-width: 640px){
  html {
    font-size: 80% !important;
  }
}
@media only screen and (min-width: 750px){
  html {
    font-size: 90% !important;
  }
}
@media only screen and (min-width: 1242px){
  html {
    font-size: 100% !important;
  }
}

2、使用脚本生成media的解决方案：

关键脚本代码：

<script>
  window.onload = function () {
    getRem(720, 100)
  };

  window.onresize = function () {
    getRem(720, 100)
  };

  function getRem(pwidth, prem) {
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth / pwidth * prem + "px";
  }

  /*
  //小米官网的写法
  !function(n){
      var  e=n.document,
            t=e.documentElement,
            i=720,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
  }(window);
*/
</script>

/* 优化写法 */
    ; (function () {
      var e = window.document,
        t = e.documentElement,
        o = "orientationchange" in window ? "orientationchange" : "resize",
        baseVal = 62.5, //基础值
        a = function () {
          var winWidth = t.clientWidth,//winWidth--》屏幕大小
            resultFontSize = 62.5;
          if (winWidth <= 320) {
            resultFontSize = baseVal;
          } else if (winWidth <= 960) {
            resultFontSize = baseVal + ((winWidth - 320) /
              1020) * 100;
          } else {
            resultFontSize = 126;
          }
          t.style.fontSize = resultFontSize + "%";
        };
      e.addEventListener &&
        (window.addEventListener(o, a, false), e.addEventListener("DOMContentLoaded", a, false))
    })();

移动端viewport相关的知识

Vscode快捷键：meta:vp

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

修改viewport
我们可以通过meta标签去修改viewport的值 ,防止滚动条出现,提升用户体验

移动web常见设置：

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

该属性最早是苹果公司在Safari中推出用来解决移动设备的viewport问题的.后来被各大安卓以及浏览器厂商效仿,所以说这个属性真的是非常有用的！

可选值

• l width:设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
• l initial-scale:设置页面的初始缩放值，为一个数字，可以带小数
• l minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数
• l maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数
• l height:设置layout viewport 的高度，这个属性对我们并不重要，很少使用
• l user-scalable:是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许