视口 | 易学教程

clientHeight , scrollHeight , offsetHeight之间的区别

阅读更多关于 clientHeight , scrollHeight , offsetHeight之间的区别

描述 clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小） scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度） offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距 1.chrome ： document.body.clientHeight document.body.scrollHeight document.body.offsetHeight 三个返回文档大小 2.火狐 console.log(document.documentElement.scrollHeight); -> 文档大小 console.log(document.documentElement.clientHeight); -> 文档大小（三个值相同，包含滚动条） console.log(document.documentElement.offsetHeight); -> 文档大小 console.log(document.body.clientHeight); -> 视口大小 console.log(document.body.offsetHeight); -> 文档大小（不含padding border）比scrollHeght略小

流式布局和viewport

阅读更多关于流式布局和viewport

流式布局百分比布局，非固定宽度，内容向两边填充，流动的布局。 viewport(视口) PC端的网页在手机端的浏览器显示是不会出现网页的，这是因为移动端的网页不是直接放在移动端的浏览器中，而是放在移动端的一个虚拟区域中，这个虚拟区域叫做viewport(视觉窗口,视口，视口的宽度一般默认比浏览器宽度大),然后视口进行相应的缩放，最后将视口放在浏览器中。适配方案因为viewport默认会进行缩放，所以网页在移动端显示的对用户不友好，所以我们需要进行一些配置来使网页在移动端显示得和pc端一样。网页宽度必须和浏览器宽度保持一致默认显示的缩放比例和pc端保持一致(缩放比例为1.0) 不允许用户缩放网页 <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> viewport主要有6个功能属性 width (特殊值: device-width,表示设备屏幕宽度) 设置宽度 height 设置高度 initial-scale(1:表示不进行缩放) 设置默认的初始化缩放比例 user-scalable 设置用户是否可以进行缩放 minmium-scale 设置最小缩放比例 maxmium-scale 设置最大缩放比例来源： https:/

css长度单位vh

阅读更多关于 css长度单位vh

css中的相对长度单位，表示相对视口的高度（viewport height），1vh = 1%*视口高度。那么100vh就是整个视口高度。来源： https://www.cnblogs.com/kongguzuyi/p/11831639.html

「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

阅读更多关于「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

本文来自尚妆前端团队南洋发表于尚妆github博客，欢迎订阅。移动端H5页面rem缩放方案flexible.js兼容375px方案的思路参考：移动端高清、多屏适配方案 viewport-and-flexible.js flexible.js github 一个新的项目复用了一些老页面，老页面是使用375px方案进行移动端适配的，meta[viewport]使用的是 <meta name="viewport" content="width=375, user-scalabe=no"> ，而新页面使用的是flexible.js伸缩方案，动态生成meta[viewport] <meta name="viewport" content="initial-scale=[num], user-scalabe=no"> 如何在老页面使用px布局的前提下，新页面使用rem布局，组件也使用rem布局，并且组件可以兼容老页面和新页面是本文的结果。首先会介绍375px方案和rem方案的实现原理。 375px方案 <meta name="viewport" content="width=375, user-scalabe=no"> 375px方案的页面开发过程对新人非常的友好，利用页面的布局视口（layout viewport）为固定值375px，和移动端浏览器窗口的自动缩放功能（视觉视口

浅谈响应式Web设计与实现思路

阅读更多关于浅谈响应式Web设计与实现思路

是否还在为你的应用程序适配PC端，移动端，平板而苦苦思索呢，是否在寻找如何一套代码适配多终端方式呢，是否希望快速上手实现你的跨终端应用程序呢，是的话，那就看过来吧，本文阐述响应式UI设计相关理论基础，包括：屏幕尺寸，物理，设备独立，CSS像素，dpr，视口等相关概念，还有响应式设计基础，常见设计模式，及响应式UI实现基本思路，希望能加深对响应式的理解和实践思路。欢迎访问我的个人博客响应式（Responsive）响应式是什么呢？顾名思义，响应式，肯定会自动响应，响应什么？应用程序是在终端屏幕窗口中展示给用户，被用户访问的，那么就是响应屏幕的变化，不同终端屏幕尺寸大小不一致，需要针对不同尺寸屏幕进行不同的展示响应。响应式（Responsive web design, RWD），是指一套应用程序用户界面（User Interface）能自动响应不同设备窗口或屏幕尺寸（screen size）并且内容，布局渲染表现良好。自适应（Adaptive）在响应式设计（RWD）之外，还有一种适配多设备屏幕的方式，自适应设计（Adaptive web design， AWD）。自适应设计(AWD)，是指一个应用程序使用多版本用户界面，针对不同设备屏幕，服务器端返回不同版本用户界面，供用户访问。自适应vs响应式自适应和响应式设计的不同主要概括如下：自适应是多套用户界面

移动端页面适配———多方案解析

阅读更多关于移动端页面适配———多方案解析

移动端页面适配———多方案解析在移动互联网快速发展的今天，手机的种类和尺寸越来越多，作为前端的小伙伴们可能会越来越头疼，但又不得不去适配一款又一款的新机型。对于移动端适配，不同的公司、不同的团队有不同的解决方案。我在项目中也用了一部分解决方案，也看到了一些解决方案，对比下，总结一些自己的理解，希望对各位有帮助，找到最适合你们项目的适配方案。下面是一些基础概念的讲解，帮助理解各种适配方案实现。像素： 1、物理像素（设备像素）屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。任何设备屏幕的物理像素出厂时就确定了，且固定不变的。 2、设备独立像素设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。 3、设备像素比设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系设备像素比＝物理像素 / 设备独立像素以iphone6为例： iphone6的设备宽和高为375pt * 667pt，可以理解为设备的独立像素，而其设备像素比为2.固有设备像素为750pt * 1334pt 通过：window.devicePixelRatio获得。设备像素比是区别是否是高清屏的标准，dpr大于1时就为高清屏，一般情况下dpr为整数

图片延迟加载3种实现方式

阅读更多关于图片延迟加载3种实现方式

定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。那么延迟加载有什么好处：首先它能提升用户的体验，试想一下，如果打开页面的时候就将页面上所有的图片全部获取加载，如果图片数量较大，对于用户来说简直就是灾难，会出现卡顿现象，影响用户体验。有选择性地请求图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。那么下面就介绍延迟加载的三种实现方式：第一种：首先将页面上的图片的 src 属性设为 loading.gif，而图片的真实路径则设置在 data-src 属性中，页面滚动的时候计算图片的位置与滚动的位置，当图片出现在浏览器视口内时，将图片的 src 属性设置为 data-src 的值，这样，就可以实现延迟加载。下面是具体的实现代码： <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Lazyload 1 </ title > <

Unity3D的四种坐标系(转)

阅读更多关于 Unity3D的四种坐标系(转)

【 Unity3D的四种坐标系】 1、World Space（世界坐标）：我们在场景中添加物体（如：Cube），他们都是以世界坐标显示在场景中的。transform.position可以获得该位置坐标。 2、Screen Space（屏幕坐标）:以像素来定义的，以屏幕的左下角为（0，0）点，右上角为（Screen.width，Screen.height），Z的位置是以相机的世界单位来衡量的。注：鼠标位置坐标属于屏幕坐标， Input.mousePosition 可以获得该位置坐标，手指触摸屏幕也为屏幕坐标， Input.GetTouch(0).position 可以获得单个手指触摸屏幕坐标。　　Screen.height = Camera.pixelHeigth 3、ViewPort Space（视口坐标）:视口坐标是标准的和相对于相机的。相机的左下角为（0，0）点，右上角为（1，1）点，Z的位置是以相机的世界单位来衡量的。 4、绘制GUI界面的坐标系：这个坐标系与屏幕坐标系相似，不同的是该坐标系以屏幕的左上角为（0，0）点，右下角为（Screen.width，Screen.height）。【四种坐标系的转换】 1、世界坐标→屏幕坐标：camera.WorldToScreenPoint(transform.position);这样可以将世界坐标转换为屏幕坐标

移动端（视口(meta)，像素比，常见屏幕尺寸）

阅读更多关于移动端（视口(meta)，像素比，常见屏幕尺寸）

1. 视口：(布局视口(layout viewport)，视觉视口(visual viewport)，理想视口(ideal viewport)) 　meta 视口标签 <meta name = "viewport" content = “ width = device-width，user-scalable = no，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0” 　width：宽度设置的是 viewport 宽度，可以设置 device-width(设备宽度)特殊值　user-scalable：用户是否可以缩放，yes 或者 no（1 或者 0）　initial-scale：初始缩放比，大于 0 的数字　maximum-scale：最大缩放比，大于 0 的数字　minimum-scale：最小缩放比，大于 0 的数字　标准的 viewport 设置　　视口宽度和设备保持一致　　视口的默认缩放比例1.0 　　不允许用户自行缩放　　最大允许的缩放比例1.0 　　最小允许的缩放比例1.0 2. 物理像素 & 物理像素比　物理像素点指的是屏幕显示的最小颗粒（也就是我们说的分辨率），是物理真实存在的，这是厂商在出厂时就设置好的，比如苹果6/7/8 是750*1334 　开发时的 1px 不一定等于

计算机图形学——窗口到视口的变换

阅读更多关于计算机图形学——窗口到视口的变换

一、窗口和视口世界坐标系中要显示的区域（通常在观察坐标系内定义）称为窗口。窗口映射到显示器（设备）上的区域称为视口 (或称视区) 。窗口定义显示什么；视口定义在何处显示世界坐标系中的一个窗口可以定义对应于多个视口如何将窗口内的图形在视口中显示出来呢？必须经过将窗口到视口的变换处理，这种变换就是观察变换（Viewing Transforma）。二、观察变换 1、变焦距效果当窗口变小时，由于视口大小不变，就可以放大图形对象的某一部分，从而观察到在较大的窗口时未显示出的细节。而当窗口变大，视口不变时，视口内显示的内容不断变小。类似于照相机的变焦处理。来源： https://www.cnblogs.com/wkfvawl/p/11745248.html

订阅视口