svg缩放移动、移动轨迹追溯_移动web开发读书笔记

viewport

移动web开发之视口viewport - 小火柴的蓝色理想 - 博客园

• 布局视口是css样式计算的依据（如宽度百分百，position）。
• 视觉视口用户正在看到的网站的区域，可以用 window.innerWidth/Height 获得。
• 在pc 端 布局视口和 视觉视口 一致的，但是在移动端他们确实独立的。
  • 为了容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的宽度，设置为980px或1024px ， 但是这会导致网页的内容被缩的很小，很难看清楚字体。
  • 在pc端对网页进行放大的时候，视觉视口会变小，同时布局视口也会变小，会导致页面发生大量重排。在移动端进行放大操作 （<meta name="viewport" content="initial-scale=2"> ），视觉视口会变小，布局视口不受影响（仅仅是整体的放大缩小，不会导致页面重排），由于在手机上会经常发生缩放，并且手机的处理器工作得很慢，电池消耗地很快，因此不重新进行布局对性能来说有很大的好处。
• 用户在理想视口下拥有最理想的浏览和阅读的宽度，用户不再需要缩放就能看清楚网页的内容。
• 只有主动地往页面里添加meta视口标签时理想视口才会生效。如果没有meta视口标签，那么布局视口将会维持它的默认宽度

//这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致
<meta name="device" content="width=device-width">

新浪网在手机端的显示状态

像素比

Web移动端适配你应该了解得再多一些

• Retina高清屏的意义不是为了为了显示更多内容，而是为了提升显示相同内容时的精细程度。故不会产生分辨率提升使屏幕文字与图像变小，造成阅读困难的问题。

左：iPhone 3GS ( 非retina屏 屏幕尺寸：480×320 分辨率：480×320 ) 右：iPhone 4 (retina屏 屏幕尺寸：480×320 分辨率：960×640 )

• 设备像素比（device pixel ratio）， 如 devicePixelRatio = 2 表示在这个网站中，浏览器会用两个物理像素（2 × 2）来表示一个css像素

<style>
    #a{
        height: 100px;
        width: 160px;;
        background-color: red;;
    }
</style>

<div id="a"> </div>

在 devicePixelRatio 像素比不一样的屏幕，实际的显示效果是一样。不会出现因为分辨率变高图像就缩小一般的情况，但是dpr=2的情况，图像会更精细一点。

多屏幕适配

设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变)。前端开发人员通过一套适配规则自动适配到其他的尺寸。

1、REM 布局

CSS以rem为单位的元素，它的大小是相对于html根节点的font-size值的。

1. 计算 rem 和 initial-scale

1 rem =  window.screen.width * dpr /10  

scale = 1 / dpr;


var dpr, rem, scale;
var docEl = document.documentElement;
var styleEl = document.createElement( 'style' );
var metaEl = document.querySelector( 'meta[name="viewport"]' );

dpr = window.devicePixelRatio || 1;
rem = window.screen.width * dpr / 10; // 这里除以10是为了让写CSS像素值时数值不至于太小
scale = 1 / dpr;

// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute( 'content', 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no' );

// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute( 'data-dpr', dpr );

// 动态写入样式，设置根节点字体大小
docEl.firstElementChild.appendChild( styleEl );
styleEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

这种方式，可以精确地算出不同屏幕所应有的rem基准值以及缩放。

假设我们拿到的是一份 750×1334 的psd 图 （以 iphone6 为标准的 2 倍图）。那么 1 rm= 750 * 2 */10 =75;

那么我们在写css 的时候就可以 通过除以75 把 px 转成rem。

$browser-default-font-size: 75px !default;//变量的值可以根据自己需求定义

html {
    font-size: $browser-default-font-size;
}

@function pxTorem($px){ 
    @return $px / $browser-default-font-size * 1rem;
}

字体最好不用rem吗，一是通过rem表示的字体不精确，二是大多数设计要求在一定屏幕大小范围内，显示的字体一样大。

CSS字体大小应该为：设计稿字体大小/设计稿倍数×dpr

举例说明如果设计稿基于iPhone 6设计的尺寸为750×1334的二倍图，某字体标记28px，则字体设置应该为28 / 2 × 2 = 28px。

在开发中可以用下面sass代码 ，生成不同设备下的font-size 大小。

@ratio: 2; //预先定义设计图倍率
.px2px(@name, @px){
    @{name}: round(@px / @ratio) * 1px;
    [data-dpr="2"] & {
        @{name}: round(@px / @ratio * 2) * 1px;
    }
    // for mx3
    [data-dpr="2.5"] & {
        @{name}: round(@px / @ratio * 2.5) * 1px;
    }
    // for px2
    [data-dpr="2.625"] & {
        @{name}: round(@px / @ratio * 2.625) * 1px;
    }
    // for 小米note
    [data-dpr="2.75"] & {
        @{name}: round(@px / @ratio * 2.75) * 1px;
    }
    [data-dpr="3"] & {
        @{name}: round(@px / @ratio * 3) * 1px
    }
    // for px2 XL
    [data-dpr="3.5"] & {
        @{name}: round(@px / @ratio * 3.5) * 1px;
    }
    // for 三星note4
    [data-dpr="4"] & {
        @{name}: round(@px / @ratio * 4) * 1px;
    }
}

.px2px(font-size, 32);
.px2px(padding, 20);
.px2px(right, 8);

使用vw做移动端页面的适配

2、vw 布局

vw：是Viewport's width的简写,1vw 等于 window.innerWidth 的1%

为什么选择rem? 因为vw有兼容问题 。也就是：rem的兼容性>vw的兼容性

假设我们的视觉设计稿是750px宽度的，那么100vw = 750px，即1vw = 7.5px

• 使用vw来实现页面的适配，并且通过PostCSS的插件postcss-px-to-viewport把px转换成vw。这样的好处是，我们在撸码的时候，不需要进行任何的计算，你只需要根据设计图写px单位
• 为了更好的实现长宽比，特别是针对于img、vedio和iframe元素，通过PostCSS插件postcss-aspect-ratio-mini来实现，在实际使用中，只需要把对应的宽和高写进去即可
• 为了解决1px的问题，使用PostCSS插件postcss-write-svg,自动生成border-image或者background-image的图片

事件

移动端tap与click的区别 && 点透事件