视口 css

视口是浏览器上显示网页的一块区域,大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致,移动端视口与浏览器窗口宽度完全独立。

PC端

PC端视口大小等于浏览器窗口可视区域大小,无论浏览器是否缩放。如下代码均可获得PC端视口宽度。

window.innerWidth

M端

移动端视口分为三类,其一布局视口、其二视觉视口、其三完美视口(理想视口)。

布局视口(本身的宽高和看到的没关系)

缩放时布局视口的CSS像素数量保持不变,只是体积发生变化,所以视觉上变大或变小。

document.documentElement.clientWidth  //布局视口的宽度
document.documentElement.clientHeight //布局视口的高度

视觉视口(眼见看到的宽高,视觉宽高)

视觉视口是指用户正看到的网页区域,大小等于屏幕中CSS像素的数量。页面缩放会对视觉视口的尺寸产生影响,当页面放大一倍时,CSS像素点的体积放大一倍,视口内的像素数量会减少一倍,如果缩小,则正好相反。

window.innerWidth  //视觉视口的宽度
window.innerHeight //视觉视口的高度

完美视口(理想视口,<meta name="viewport" content="width=device-width">)

布局视口不友好,没有考虑到手机尺寸,所以苹果公司引入完美视口的概念。它是对设备来说最理想的布局视口尺寸,用户进入页面不需要进行缩放。采用如下代码可以将布局视口尺寸设置为理想尺寸。

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽。

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  1. width 宽度设置的是viewport宽度,可以设置device-width特殊值
  2. initial-scale 初始缩放比,大于0的数字
  3. maximum-scale 最大缩放比,大于0的数字
  4. minimum-scale 最小缩放比,大于0的数字
  5. user-scalable 用户是否可以缩放,yes或no(1或0)

标准的viewport设置

  • 视口宽度和设备保持一致
  • 视口的默认缩放比例1.0
  • 不允许用户自行缩放
  • 最大允许的缩放比例1.0
  • 最小允许的缩放比例1.0
     

将布局视口的宽度设置为设备独立像素的宽度。通过如下代码可以获取设备独立像素的尺寸。

screen.width  //设备独立像素宽度
screen.height //设备独立像素高度

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/108834.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

集准测试-架构真题(五十六)

如果数据库单标即可实现业务功能&#xff0c;采用&#xff08;&#xff09;方式进行数据交换与处理较为合适。如果通过数据库不同表的连接操作获取数据才能实现业务功能&#xff0c;这时候采用&#xff08;&#xff09;方式进行数据交换与处理合适。 主动记录数据网关包装器数…

RabbitMQ的LazyQueue

在默认情况下&#xff0c;RabbitMQ会将接收到的信息保存在内存中以降低消息收发的延迟。但在某些特殊情况下&#xff0c;这会导致消息积压&#xff0c;比如&#xff1a; 消费者宕机或出现网络故障消息发送量激增&#xff0c;超过了消费者处理速度消费者处理业务发生阻塞 一旦…

PyQt 小程序

设备管理程序 v0.0.1.0, 终于出了一个基础版本,… … 两个字典的键值判断 辛亏用的是Python 这个编码时间大大缩短了 对已有的命令行进行GUI 化 from typing import Optional import PySide6.QtCore import PySide6.QtWidgets from cmd_ui import Ui_MainWindow from PySide6.…

Qt 视口和窗口的区别

视口和窗口 绘图设备的物理坐标是基本的坐标系&#xff0c;通过QPainter的平移、旋转等变换可以得到更容易操作的逻辑坐标 为了实现更方便的坐标&#xff0c;QPainter还提供了视口(Viewport)和窗口(Window)坐标系&#xff0c;通过QPainter内部的坐标变换矩阵自动转换为绘图设…

Vue2使用定时器和闭包实现防抖和节流函数。将函数放入util.js中,供具体功能在methods中调用

Vue2使用定时器和闭包实现防抖和节流函数。将函数放入util.js中&#xff0c;供具体功能在methods中调用。<br/ 参考文档&#xff1a; 如何在Vue中优雅的使用防抖节流人类高质量JS防抖与节流机制Vue项目中使用防抖和节流vue2使用lodash中的防抖&#xff08;debounce&#xff…

小程序首页搭建

小程序首页搭建 1. Flex布局是什么&#xff1f;2. 容器的属性2.1 flex-direction属性2.2 flex-wrap属性2.3 flex-flow属性2.4 justify-content属性2.5 align-items属性2.6 align-content属性 二.首页布局搭建二.1moke模拟数据实现轮播图4.信息搭建 Flex弹性布局 1. Flex布局是…

未来展望:大型语言模型与 SQL 数据库集成的前景与挑战

一、前言 随着 GPT-3、PaLM 和 Anthropic 的 Claude 等大型语言模型 (LLM) 的出现引发了自然语言在人工智能领域的一场革命。这些模型可以理解复杂的语言、推理概念并生成连贯的文本。这使得各种应用程序都能够使用对话界面。然而&#xff0c;绝大多数企业数据都存储在结构化 …

我的创作纪念日———C/C++之动态内存管理

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.前言 2.为什么要有动态内存分配…

NSS [NISACTF 2022]easyssrf

NSS [NISACTF 2022]easyssrf 先看题目&#xff0c;给了一个输入框 看这提示就知道不是curl了&#xff0c;先file协议读一下flag&#xff0c;file:///flag 不能直接读flag&#xff0c;读个提示文件file:///fl4g 访问一下 <?phphighlight_file(__FILE__); error_reporting(0…

python每日一练(9)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

mybatisplus 自定义mapper加多表联查结合分页插件查询时出现缺失数据的问题

问题描述 最近做项目时使用了mybatisplus&#xff0c;分页插件也使用的是mybatisplus自带的分页插件&#xff0c;业务需求是查询客户列表&#xff0c;每个客户列表中有一个子列表&#xff0c;在通过分页插件查询后&#xff0c;会出现数量总数为子列表总数、客户列表与子列表不…

oracle库中数据利用datax工具同步至mysql库

查看oracle版本 $sqlplus aaa/aaaa192.168.1.1/lcfaSQL*Plus: Release 19.0.0.0.0 - Production on Tue Oct 17 15:56:46 2023 Version 19.15.0.0.0Copyright (c) 1982, 2022, Oracle. All rights reserved.Last Successful login time: Tue Oct 17 2023 15:56:03 08:00Conne…

【Ceph Cluster】完全删除Ceph集群

注意&#xff1a;在执行这些步骤之前&#xff0c;请确保你已经备份了所有重要的数据&#xff0c;并且你明白这些步骤将永久删除 Ceph 集群。 停止 Ceph 服务&#xff1a; systemctl stop ceph.target卸载 Ceph 包&#xff1a;卸载 Ceph 相关的软件包&#xff0c;使用你的 Linux…

linux下 u2net tensorrt模型部署

TensorRT系列之 Windows10下yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov7 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov6 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov5 tensorrt模型加速…

iperf3交叉编译

简介 iperf3是一个用于执行网络吞吐量测量的命令行工具。它支持时序、缓冲区、协议&#xff08;TCP&#xff0c;UDP&#xff0c;SCTP与IPv4和IPv6&#xff09;有关的各种参数。对于每次测试&#xff0c;它都会详细的带宽报告&#xff0c;延迟抖动和数据包丢失。 如果是ubuntu系…

华为---PPP协议简介及示例配置

PPP协议简介 PPP是Point-to-Point Protocol的简称&#xff0c;中文翻译为点到点协议。与以太网协议一样,PPP也是一个数据链路层协议。以太网协议定义了以太帧的格式&#xff0c;PPP协议也定义了自己的帧格式&#xff0c;这种格式的帧称为PPP帧。 利用PPP协议建立的二层网络称为…

MIT6.5830 Lab0-Go tutorial实验记录(三)

MIT6.5830 Lab0-Go tutorial实验记录&#xff08;三&#xff09; – WhiteNights Site 标签&#xff1a;Golang 在前面两次实验记录的铺垫&#xff0c;是时候完成第一项任务了。 实验步骤 补全handlers.go中缺失的代码 先来看第一个部分&#xff0c;从RidershipDB获取图像数据…

设计模式:工厂方法模式(C#、JAVA、JavaScript、C++、Python、Go、PHP):

本节主要介绍设计模式中的工厂方法模式。 简介&#xff1a; 工厂方法模式&#xff0c;它是对简单工厂模式的进一步抽象化&#xff0c;其好处是可以使系统在不修改原来代码的情况下引进新的产品&#xff0c;即满足开闭原则。 它定义了一个用于创建对象的工厂接口&#xff0c;让…

12-k8s-HPA自动扩缩容

文章目录 一、k8s弹性伸缩类型二、HPA原理三、metrics-server插件四、创建nginx提供负载测试五、部署HPA master操作即可 一、k8s弹性伸缩类型 Cluster-Autoscale: 集群容量(node数量)自动伸缩&#xff0c;跟自动化部署相关的&#xff0c;依赖iaas的弹性伸缩&#xff0c;主要用…

户外运动盛行,运动品牌如何利用软文推广脱颖而出?

全民健康意识的提升和城市居民对亲近自然的渴望带来户外运动的盛行&#xff0c;这也使运动品牌的市场保持强劲发展势头&#xff0c;那么在激烈的市场竞争中&#xff0c;运动品牌应该如何脱颖而出呢&#xff1f;下面就让媒介盒子告诉你&#xff01; 一、 分享户外运动干货 用户…