码迷,mamicode.com
首页 > 其他好文 > 详细

mobile_缩放

时间:2018-11-23 16:05:50      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:视觉   inf   面积   auto   str   info   分享图片   像素   不同   

从技术层面上开讲,缩放就是放大或者缩小 css 像素面积的过程

改变的是视觉视口的尺寸(放大操作,视觉视口变小,看到的东西变少)

移动端的缩放,没有改变布局视口的任何东西,改变的是视觉视口

布局视口,视觉视口,理想视口 最终代表的都是屏幕的尺寸

在屏幕这一块区域中,不同的视口 包含了不同个数的 css 像素 个数

 

IPhone 6  ,  理想视口 = 布局视口 = 视觉视口 = 设备独立像素 = 375

 

PC 端缩放

元素效果变大,元素具体像素值不变,css 像素的面积变大

 

移动端缩放        (缩放的是 布局视口)

  • 放大

css 像素 面积变大,元素像素值不变,

单个 css 像素的物理像素变多

视觉视口 中装的 css 像素个数变少,视觉视口 变小

技术分享图片

 

  • 缩小

css 像素 面积变小,元素的像素值不变

单个 css 像素 的物理像素变少

视觉视口 中 css 像素个数变多,视觉视口 变大

 

  • 1

 

mobile_缩放

标签:视觉   inf   面积   auto   str   info   分享图片   像素   不同   

原文地址:https://www.cnblogs.com/tianxiaxuange/p/10007914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!