CSS 视口 - viewport

最新推荐文章于 2023-09-20 21:59:58 发布
最新推荐文章于 2023-09-20 21:59:58 发布
阅读量1.2k 收藏 5
点赞数
分类专栏： CSS 浏览器 文章标签： css chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Discowei/article/details/118641264
版权
本文介绍了CSS视口的概念，包括布局视口、视觉视口和理想视口，并重点讲解了理想视口在移动端的重要性。同时，讨论了meta视口标签的使用，强调其在确保页面在不同设备上正确显示的作用，如设置视口宽度为device-width，初始缩放比例为1.0，禁止用户缩放等。
摘要由CSDN通过智能技术生成

CSS 视口 - viewport

什么是视口

视口-viewport 就是浏览器显示页面内容的屏幕区域。

视口分类：

  • 布局视口 - 弃用 (deprecate)
  • 视觉视口 - 弃用 (deprecate)
  • 理想视口 - 开发主流

布局视口 layout viewport

  • 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
  • iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jlnYuDxo-
    layout viewport

视觉视口 visual viewport

  • 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域 。
  • 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tBGMZDtc-1625924689345)(2021-07-10-21-34-22.png)]
最低0.47元/天 解锁文章
Punkerwei
关注
专栏目录
viewpoint视口
qq_39288987的博客
10-31 1509
viewpoint是什么 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。 在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是...
前端开源库-postcss-px-to-viewport
08-29
其中，`postcss-px-to-viewport` 是一个非常实用的前端开源工具，它允许我们将传统的像素单位（px）自动转换为基于视口的单位（vw、vh、vmin、vmax），以适应各种屏幕尺寸，从而实现更加灵活的布局。 首先，我们...
CSS笔记（关于viewport）
banmao8461的博客
08-22 170
本文为来自腾讯的干货：深度讲解VIEWPORT和PX是什么及移动前端开发之viewport的深入理解的读后笔记 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name="viewport" content="width=device-width,initial-scale=1.0"> 其中： ...
CSS3 视口 viewport
xiongmouren_jy的博客
05-15 788
视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口，视觉视口和理想视口。 1.布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是用于解决早起的PC端页面在手机上显示的问题。 由于移动端设备屏幕比较小，不能像PC端浏览器...
css 之 viewport
qq_26239917的博客
11-02 249
1.布局视口 2.视觉视口 3.理想视口 布局视口是开发者布局使用的宽度 视觉视口是可见宽度 在移动端 一般视觉视口小于布局视口，为了能在手机上完美展示页面，让布局视口和视觉视口相同就是解决办法 ...
CSS 响应式设计：Viewport
最新发布
梁辰兴的博客
09-20 478
Viewport 是一个用于在各种设备（如手机、平板电脑、桌面等）上创建和渲染 Web 页面的容器。在设计和开发响应式网站时，Viewport 非常重要，因为它定义了网页的可视区域，即用户在设备屏幕上可以看到的内容。Viewport 的宽度和高度可以由开发者进行设置，这样他们就可以控制网页在不同设备上的布局和缩放。一般来说，桌面电脑的 Viewport 尺寸为1024*768px，而手机设备的 Viewport 尺寸则可能只有320*568px。
postcss-px-to-viewport:PostCSS的插件，可从像素单位生成视口单位（vw，vh，vmin，vmax）。 通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择
05-02
postcss px到视口 English | 的插件，从像素单位生成视口单位（vw，vh，vmin，vmax）。 演示版 如果您的项目涉及固定宽度，则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; ...
前端开源库-postcss-px-to-viewport.zip
10-05
Postcss-px-to-viewport是PostCSS的一个插件，它将CSS中的像素单位（px）自动转换为视口单位（viewport width - vw 和 viewport height - vh）。视口单位是一种相对单位，vw代表视口宽度的百分比，vh代表视口高度的...
vue-in-viewport-directive:Vue 2指令，当元素是视口时添加CSS类
04-28
import inViewportDirective from 'vue-in-viewport-directive' Vue . directive ( 'in-viewport' , inViewportDirective ) 使用这些类来触发CSS转换（例如）： < div class =' box ' v-in-vi
【前端】css样式视口、布局
qq_41466440的博客
02-01 1263
【前端】css样式布局
CSS—viewport视口详解
雷雨天的雷胖子
02-03 1444
目录 一、概述 二、移动端视口 一、概述 视口是浏览器上显示网页的一块区域，大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致，移动端视口与浏览器窗口宽度完全独立。 PC端视口大小等于浏览器窗口可视区域大小，无论浏览器是否缩放。如下代码均可获得PC端视口宽度。 window.innerWidth 二、移动端视口 移动端视口分为三...
css3之viewport
qq_37326058的博客
01-16 290
随着移动端的发展，越来越多的web页面需要适配各种各样的移动终端。移动设备中的浏览器 是把页面放在一个虚拟的窗口 中的，这个虚拟的窗口就是viewport视口(用户页面的可视区域)。 一个meta标签就可以。 <meta name="viewport" content="width=device-width,Initial-scale=0.5,maximum-scale=1.0,minimu...
CSS视口单位:快速入门
weixin_34024034的博客
04-26 232
翻译自CSS Viewport Units: A Quick Start。此文章简单介绍了视口单位及其应用，用于提升大家css知识的广度 单位意义 CSS中有四个基于视口单位，分别为vh、vw、vmin和vmax。 视口高度（vh）- 这个单位表示视口的高度。1vh等于视口高度的1%； 视口宽度（vw）-这个单位表示视口的宽度。1vw等于视口宽度的1%； 视口最小值（vmin）- 这个单位表...
CSS视口单位
man_tutu的博客
05-13 1756
视口单位已经存在好几年了，但我们没有看到他们被广泛地使用。他们现在已经被所有主流浏览器所支持并提供独特的功能使得它能够在特定情况下非常有用，特别是那些涉及响应式的设计。
css视口、多倍图
leekos的博客，分享web安全相关知识~
02-09 329
2.3理想视口ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 ● 理想视口,对设备来讲,是最理想的视口尺寸 需要手动添写meta视口标签通知浏览器操作 ● meta 视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽 2.4总结 ●视口就是浏览器 显示页面内容的屏幕区域 ●视口分为布局视口、视觉视口和理想视口 ●我们移动端布局想要的是理想视口就是手机屏幕有多宽 ,我们的布局视口就有多宽 ●想...
CSS------视口布局
我好像还记得 愿望是什么
12-14 173
视口布局 vw,vh 视口单位 相对单位 所有设备的视口100vw ,100vh 100vw : viewport width 视口宽度，浏览器可视区域的宽度 100vh : viewport height 视口高度，浏览器可视区域的高度 750px 100vw 1vw = 7.5px; 375px 100vw 1vw = 3.75px 以设计稿为准: 假设还是750px设计稿 750px=100vw 1px=0.13333vw; 预设字体基础值 100px 1r
【CSS】移动前端开发之viewport的深入理解
RankBill
03-14 1646
    做移动开发 最近遇到了viewport的问题特转载         本文转载自：  http://www.cnblogs.com/2050/p/3877280.html       版权归作者所有 感谢原作者   移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及...
CSS移动端之viewport视口
weixin_46048542的博客
08-28 344
示例代码： <meta name="viewport" content="width=device-width, initial-scale=1"> @media screen and (max-width:480px) { // some style } 桌面上视口宽度等于浏览器宽度，但在手机上有所不同。 布局视口。layout viewport手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。默认大小为980像素，可通过do
CSS之HTML meta viewport属性详解
weixin_34289454的博客
09-26 149
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和...
postcss-to-viewport
08-05
Postcss-px-to-viewport是一个优秀的插件，用于将px单位转换为视口单位vw。它可以解决在移动端开发中使用px单位的痛点，并且满足项目的理想要求。该插件可以通过安装postcss-px-to-viewport及其依赖来使用，具体安装命令为：npm install postcss-px-viewport postcss-viewport-units postcss-preset-env -D。其中postcss-px-viewport是主要的插件，而postcss-viewport-units和postcss-preset-env是其依赖，用于支持更多的CSS新特性和语法转换。在Vue项目中引入该插件，可以使用以下命令：vue create mobile-px-demo cd mobile-px-demo && yarn add postcss-px-to-viewport -D。这样就可以成功使用postcss-px-to-viewport插件进行px单位到视口单位vw的转换了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Punkerwei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值