【JavaWeb学习】CSS (移动端开发视口)

Garcia • Kirlant

已于 2022-05-15 10:05:23 修改

阅读量155

点赞数

分类专栏： web前端学习文章标签： css 学习 css3

于 2022-05-10 11:35:16 首次发布

本文链接：https://blog.youkuaiyun.com/WingNebula/article/details/124684488

版权

web前端学习专栏收录该内容

25 篇文章

订阅专栏

本文介绍了移动端开发中的视口概念，强调了默认视口大小为980CSS像素，并指出在编写移动端代码时需考虑合理的像素比。通过meta标签设置视口大小以匹配设备最佳像素比，确保内容正确显示。此外，文章推荐使用vw单位进行布局，以适应不同设备的视口宽度，并提供了适配策略，如通过计算vw与px的转换来设定字体大小和使用rem进行布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端的默认视口大小：980 CSS像素 $\longrightarrow$ 默认情况下，移动端的像素比就是 980/移动端宽度。
如果直接在网页中编写移动端代码，在980的视口下，会导致网页中的内容非常小 $\longrightarrow$ 编写移动端页面时，必须确保合理的像素比：1 CSS像素 = ？物理像素 通过改变视口的大小来改变像素比

利用 meta 标签设置视口大小
每款移动设备都有一个最佳像素比，设为这个值就好了。此时的视口大小为最佳视口。<meta name="viewport" content="width=device-width, initial-scale=1.0">

vw单位

不同的设备，完美视口的大小不同，像素比不同，所以同样个数的像素在不同设备中的显示情况不同。 $\longrightarrow$ 在移动端开发时，不能用 px 来进行布局，而是使用视口宽度 vw 。vw永远参照视口宽度计算。
100vw = 一个视口宽度，1vw = 1%视口宽度。
常见移动端设计图的宽度是 750px 或者 1125px。