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%);(注意用逗号)