javascript 学习笔记：二倍图/多倍图

javascript 学习笔记

1、视口标签 ：viewport

   不加视口标签，显示是以980px布局视口显示，会有字体太小，看不清的问题。

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

<!-- 上面的参数说明
    width=device-width 视口布局宽度都等于设备宽度 
    initial-scale=1.0 视口的默认缩放比例是1.0 
    maximum-scale=1.0  最大允许缩放比例1.0 
    minimum-scale=1.0  最小允许缩放比例1.0
    user-scalable=no  值为0或no 表示不允许用户自行缩放-->

2、二倍图、多倍图

    （1）物理像素也叫分辨率，在pc端，1px等于1个物理像素，在手机端是一个比例，不是一一对等的。不同的手机型号的物理像素比是不一样的。

       Retina：视网膜屏幕

  （2）准备的图片是需要像素的两倍，即 需要放一个100X100的图片，那么久找一个200X200的图片，缩放到100X100，就是2倍图；

 

3、背景图片缩放

  div {
            width: 400px;
            height: 400px;
            border: 2px dotted palevioletred;
            background: url(Snipaste.jpg) no-repeat;
            /* 背景图片的缩放 多倍图运用 宽度高度缩放*/
            /* background-size: 400px 400px; */
            /* 按父盒子比例缩放 */
            /* background-size: 100% 100%; */
            /* 完全覆盖 按图片宽高等比例放大，直到完全覆盖父盒子，图片会有超出，超出部分就看不到了 */
            /* background-size:cover; */
            /* 宽或者高度达到父盒子高度之后，就不会在拉伸了，会有填不满的情况,有空白页面 */
            background-size: contain;
        }

 4、切图工具：cutterman

     功能强大，可以切多倍图。