PC-side and mobile-side scaling issues

Source: Internet
Author: User
Summarize
在布局视口,CSS像素不会发生个数上的变化,那么说,一个大页面上,所有CSS像素都是固定住的,是不变的当用户缩放操作时,在视觉视口上操作,但是,视觉视口永远屏幕那么大,而且我看东西都是通过屏幕看,换句话说,我们看东西,看到的东西有限缩放操作,改变的是CSS像素的面积,放大操作,CSS像素的面积变大,一个CSS像素里对应的物理像素变多(物理像素在屏幕上,固定不变的)所以,通过视觉视口看CSS像素面积增大,相应的个数变少因为我视觉视口呈现的大小固定不变,缩放不会影响布局视口的尺寸大小,只不过面积发生变化布局视口,视觉视口,理想视口其实最终代表的都是屏幕的尺寸在屏幕这一块尺寸中,不同的视口它包含了多少个css像素的个数(布局视口里面包含的css像素个数不变,视觉视口,理想视口会随缩放而改变)布局视口:    默认情况下               980个css像素       加meta标签后            设备独立像素所代表的值 width = device-width视觉视口:    默认情况下                       设备独立像素所代表的值         用户放大或者系统放大时   视觉视口所包含的css像素的个数变少    用户缩小或者系统缩小时   视觉视口所包含的css像素的个数变多理想视口    由于理想视口只在加meta后才会出现,理想视口的尺寸等于设备独立像素所代表的值布局视口 = 视觉视口 = 理想视口

PC-side and mobile-side scaling issues

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.