发表于: 2018-07-03 16:02:12
3 744
今天完成的事情
任务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)
评论