html页面视口,web移动端---视口viewport

视口viewport

视口viewport：简单点说就是用来预览网页的窗口。

又分为以下两大类：

pc端视口：就是浏览器的可视区域。

移动端视口：当前设备的屏幕区域。

一、 pc端视口：

1.在PC端,浏览器窗口大小会影响HTML大小,进而影响网页布局

2. 在PC端视口其实就是我们浏览器大小(在PC端,视口可以影响HTML元素大小)

二、移动端视口：

1.视觉视口visual viewport ：眼睛看到的区域大小

2.布局视口layout viewport ：当前视口就是用来布局的(默认大小980px)

3.理想视口ideal viewport ：又叫标准视口

设置步骤：1.容器水平方向不能出现滚动条(百分比)

2.页面内容不能出现缩放

语法：

三、屏幕适配：

网页不能出现滚动条和缩放.(控制缩放)

解决方式: 通过设置就可以控制

width=device-width 宽度等于当前设备宽度,满足多个终端

initial-scale=1 不缩放

user-scalable=0 禁止用户缩放

四、多行文本溢出显示省略号

/* 设置超出部分的显示方式 */

overflow: hidden;

/* 文字溢出显示省略号 */

text-overflow: ellipsis;

/* 用来控制显示行数 */

-webkit-line-clamp: 2;

/* 文字显示方式,默认水平 */

-webkit-box-orient: vertical;

/* 将盒子转为弹性盒子 */

display: -webkit-box;

注意: 如果是纯字母实现多行文本溢出,需要加一个属性 word-break: break-all;

默认字母不会自动换行的,所以需要加word-break: break-all并且在文字中设置一个空格或者回车符

五、定位脱标元素盒子居中

1. margin: 0 auto;

只能实现标准流下的盒子居中显示

2. position: absolute;

left: 50%;

margin-left: -25px;

3. position: absolute;

left: 50%;

top: 50%;

/* 也是向左移动当前元素宽度的一半 */

transform: translate(-50%, -50%);(注意用逗号)

html页面视口,web移动端---视口viewport相关推荐

web移动端-视口是什么
文章目录前言一.视口是什么二.视口单位vh与vw介绍(了解) 前言学习移动端的必须要了解的知识点!-视口一.视口是什么视口:手机网页的大小 <meta name="view ...
html5页面调试工具,web移动端调试神器Eruda
在Web开发过程中,对html页面进行开发和调试的时候都会用到浏览器提供的调试工具,小编我最常用的就是Chrome浏览器自带的开发者工具了,可以很方便的对JS代码进行断点调试,log也很方便.但是在移 ...
移动端布局三种视口_移动端布局：视口viewport的理解
移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一 ...
移动端布局三种视口_什么是视口？移动端浏览器中的3种视口
视口(Viewport)是移动Web开发中一个非常重要的概念,最早是由苹果公司在推出iPhone手机时发明的,其目的是为了让iPhone的小屏幕尽可能完整显示整个网页.通过设置视口,不管网页原始的分辨 ...
web移动关于视口的代码操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）
记录一个最近在微信端页面开发时出现的问题:页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白). 原因:pc端微信浏览器不支持es6,而我的代码使用了 le ...
web 移动端开发基础
web 移动端开发基础文章目录 web 移动端开发基础了解视口相关内容 meta 视口标签掌握二倍图用法物理像素 & 物理像素比多倍图二倍精灵图做法了解移动端常见选择方案掌握移 ...
移动端适配viewport的概念与理解
一.基本概念首先,viewport指视口,浏览器上(或一个app中的webview)显示网页的区域.PC端的视口是浏览器窗口区域,而移动端的则存在三个不同的视口: layout viewport:布 ...
web移动端开发经验总结
整理web移动端开发经验,部分内容借鉴于网上的博文. 1.meta标签 <meta name="viewport" content="width=device-wi ...

html页面视口,web移动端---视口viewport

html页面视口,web移动端---视口viewport相关推荐

最新文章

热门文章