前言

学习移动端的必须要了解的知识点!-视口

一、视口是什么

视口：手机网页的大小
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
- name：要设置的属性，viewport表示视口
- content：要设置的内容
- width=device-width：设置视口宽度与设备宽度一致
- initial-scale=1.0：设置视口初始化缩放为1（不缩放）
- user-scalable=no：设置视口不允许用户缩放（绝大多数手机网页都是不能缩放的）
- 其他属性介绍
  - maximum-scale=5.0：设置视口最大缩放比例为5，如果禁止缩放该属性设置无效
  - m-scale=0.5：设置视口最小缩放比例为0.5
- 小技巧: 在vscode中设置视口快捷键meta:vp + tab键

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 兼容IE浏览器 如果用户手机是ie浏览器，用最新的edge内核来解析--><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--1.pc端网页大小 ： 可以随意改变2.移动端网页大小： 不能改变，取决于手机屏幕大小3.视口：移动端网页布局大小name:viewport 视口content：视口内容属性width=device-width：让移动端网页宽度和当前手机屏幕一致initial-scale=1.0 ： 设置视口默认不缩放user-scalable=no : 设置不允许缩放--><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- 小技巧：在vscode中输入：  meat:vp   然后tab键可以快速设置移动端视口 --><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Document</title><style>body{margin: 0px;padding: 0px;}.box{width: 320px;height: 375px;background-color: red;}</style>
</head>
<body><div class="box">班长</div>
</body>
</html>

二、视口单位vh与vw介绍(了解)

vh与vm与rem作用非常类似，最大的区别是vh与vm的浏览器兼容性不如rem，所以实际开发中还是rem使用较多

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding: 0;margin: 0;}html{height: 100%;}body{height: 300px;}div{background-color: red;/* 1.百分比：参照父元素 *//* width: 100%;height: 100%; *//* 2.视口单位  vw : 视口宽度百分之一    1vm = %1视口宽度vh : 视口高度百分之一    1vh = 1%视口高度 vmin: 视口最小值的百分之一 vmax：视口最大值百分之一竖屏： 1vmin = 1vw  1vmax = 1vh 横屏:  1vim = 1vh   1vmax = 1vw*//* 盒子宽高与屏幕宽高一致width: 100vw;height: 100vh; *//* 盒子宽高相等 = 屏幕宽度width: 100vw;height: 100vw; */width: 50vmin;height: 50vmax; }</style>
</head>
<body><div></div>
</body>
</html>

以上就是关于视口的一些介绍,希望给大家有所帮助!

web移动端-视口是什么相关推荐

html页面视口,web移动端---视口viewport
视口viewport 视口viewport: 简单点说就是用来预览网页的窗口. 又分为以下两大类: pc端视口:就是浏览器的可视区域. 移动端视口:当前设备的屏幕区域. 一. pc端视口: 1. ...
web 移动端开发基础
web 移动端开发基础文章目录 web 移动端开发基础了解视口相关内容 meta 视口标签掌握二倍图用法物理像素 & 物理像素比多倍图二倍精灵图做法了解移动端常见选择方案掌握移 ...
OpenStack环境搭建（四：web控制端各节点的部署及配置）
实验要求: 完成Virtual box平台安装,会应用相关操作: 在virtual box虚拟平台上部署Fuel Master节点: 在virtual box虚拟平台上部署计算节点Computer: ...
Web服务端性能提升实践
随着互联网的不断发展,日常生活中越来越多的需求通过网络来实现,从衣食住行到金融教育,从口袋到身份,人们无时无刻不依赖着网络,而且越来越多的人通过网络来完成自己的需求. 作为直接面对来自客户请求的Web ...
Web移动端Fixed布局的解决方案
Web移动端Fixed布局的解决方案参考文章: (1)Web移动端Fixed布局的解决方案 (2)https://www.cnblogs.com/sxgxiaoge/p/9257648.html 备 ...
vlc web 登录账号_怎么在web网页端解绑敬业签绑定的手机号？
支持手机电脑多端同步的便签软件敬业签可以用来记录备忘事项,同时针对记录的备忘事项可设置时间提醒.在使用敬业便签时,为了确保数据的安全,以及在日后使用时方便找回账号密码,可以将便签账户和手机号绑定在一起 ...
php开源饭馆记账软件_GitHub - CNYoki/xxjzWeb: 小歆记账WebApp项目(Web服务端)
小歆记账WebApp项目(Web服务端) 1.简介小歆记账WebApp是一个面向移动端的记账工具,此项目为Web服务端:使用ThinkPHP+MySQL作为后台,AmazeUI作为前端. 项目基础版 ...
从web移动端布局到react native布局
在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...
web移动端开发经验总结
整理web移动端开发经验,部分内容借鉴于网上的博文. 1.meta标签 <meta name="viewport" content="width=device-wi ...

web移动端-视口是什么

文章目录

前言

一、视口是什么

二、视口单位vh与vw介绍(了解)

web移动端-视口是什么相关推荐

最新文章

热门文章