今天完成的事情

任务7代码重构

明天计划的事情

继续刷任务

遇到的问题

640切的图

使用bootstrap 就无法使用js-rem 来等比缩放了  (bootstrap4.1 使用的单位是rem  1rem=16px chrome的字体小于12就不再缩放)

initial-scale = 0.5 搞定

收获

详细了解了下 viewport 简单记录下自己的想法

以iphone5举例  宽度是 640px 物理像素  (只关注宽度 先不考虑缩放 后面不重复)

retina屏(640px/2 = 320px  css像素/独立像素/点    这里的除数2  就是@2x的来历 也就是iphone5 宽度上使用 2个物理像素来展示 1个css像素)

(实际上使用4个物理像素来展示1个css像素 因为还有高 重申下  我们只关注宽  而且先不考虑缩放  不要在意这些细节...)

下面用的像素都是指的css像素了或者叫独立像素了  

举例  width: 320px  实际在iphone5中占用  320px*2 = 640px 物理像素  

也就是css设置width:320px 的时候正好横向铺满 iphone5 (640px 物理像素)

所以iphone5的 css 像素宽度为 640px / 2 = 320px  css像素  或者叫 320点  这个宽度叫 ideal-viewport  ( width=device-width )

智能手机出现时整个世界的网页都是针对PC设计的(可能不严谨  不要在意那些细节...)

PC时代主流设计大概为960px(是的经历过好几个时代越来越宽   不要在意那些细节...)

智能手机浏览器要兼容这些PC站怎么办

于是就虚拟了一个980px宽屏幕(不同系统浏览器虚拟的这个宽度不同)  这个叫 layout-viewport

css width: 100%   =  980px

于是我们针对PC做的960px的站就可以完美显示了  不会变形不会错位

但是980px的宽度明显超过了手机屏的宽度  怎么办  缩放

缩放到什么程度  让 980px (layout-viewport)  正好铺满整个屏幕   (这个叫   visual-viewport 你从屏幕上能看到的css像素数 )

所以当我们没有设置 viewport 时  浏览器就把网站自动缩放了 缩放比例为  320px(ideal-viewport) / 980px(visual-viewport) = 0.32653

相当于浏览器自动设置了  <meta name="viewport" content="width=device-width, initial-scale=0.32653">

缩放后的问题是看不清... 用户需要放大  滚动条滚动来滚动去 

所以我们要针对智能手机开始设计网站

我们针对手机设计的网站  要告诉浏览器  这是专门设计过的  不是原来的PC站  不需要虚拟宽度  也不要缩放了：

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

这样 css  width: 100%  = 320px  (iphone5      iphone6 = 750/2 = 375   iphone10 = 1125/3 = 375)