2021-05-06

最新推荐文章于 2024-09-10 13:54:44 发布

Wsh1123803066

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量51

点赞数

文章标签： html5 css javascript

本文链接：https://blog.csdn.net/qq_44956578/article/details/116451228

版权

本文讲述了如何将PC端网站适配到不同尺寸的手机屏幕，重点介绍了虚拟容器（视口）的概念及其宽度设定，强调了980px的由来。通过实例解释了如何处理盒子在不同手机上的缩放问题，并提出通过设置视口宽度避免内容压缩。最后，阐述了物理像素和逻辑像素的区别，以及在实际开发中如何处理它们的关系。

摘要由CSDN通过智能技术生成

目标：实现webapp
-------------------------------------------
两器：
编辑器：vscode
浏览器：谷歌浏览器不要使用其它浏览器
-------------------------------------------
把PC端的网站放到手机端，分两步：
1）把电脑端的网站放到虚拟容器中，这个虚拟容器的宽度是980px，这个980是人为规定的，手机在出厂时就设置好了。
如果电脑端的网站整体的宽度也是980px，就会正好放到这个虚拟容器。
如果电脑端的网站宽度大于980px，你的网站在这个虚拟容器中就会产生一个水平滚动条。
如果电脑端的网站宽度小于980px，这个虚拟容器也可以放下。
2）第二步，就是把这个虚拟容器放到手机里
如果手机的宽度也是980，正好把这个虚拟容器放下。
不幸的是，手机的宽度在出厂时，也是设置死的。如：iphone6/7/8宽度是375
如果iphone5宽度是320，如iphone6/7/8plus它的宽度是414.... 安卓手机在
出厂时，也规定死了一个宽度，你自己可以去查一下，你手机的宽度。

视口：
上面的虚拟容器就叫视口。
为什么是980？
很早之前，电脑的分辨率比较低，写一个电脑端的网站都是980px。
为了让980px的网站可以在手机完美显示出来，人为地把这个虚拟容器的宽度定了980px。
iphone6/7/8宽度是375
iphone5宽度是320
iphone6/7/8plus它的宽度是414
上面的320px 375px 414px，指的是手机的宽度（设备独立像素，和我们手机的分辨率不是一回事）
在真实开发中，通常会以iphone6作为标准。
在开发时，我们就以手机宽度为主。
-------------------------------------------
物理像素：
指的是手机或电脑屏上的发光点。叫物理分辨率，也叫物理像素。
如：iphone6的分辨率1334*750
在水平方向上有750个发光点，在垂直方向上有1334个发光点。
在开发时，不关心物理像素
逻辑像素：
在写CSS代码时，写的像素叫逻辑像素，如：.box{width:100px,height:100px;}
在电脑端：1个逻辑像素等于 1个物理像素
但是在手机端就不一样了。
-------------------------------------------
写一个盒子：
200*200盒子。
在PC端：逻辑像素和物理像素一一对应
在iphone6/7/8plus上：1)盒子先放到虚拟容器（980px）中然后压缩放到414的手机中
在iphone6/7/8上：1)盒子先放到虚拟容器（980px）中然后压缩放到375的手机中
在iphone5上：1)盒子先放到虚拟容器（980px）中然后压缩放到320的手机中