• 视口(viewport)原理详解之第一部分


      在这篇文章中,我将解释viewports和元素width是如何工作的,比如html元素、  window和 screen。

      这篇文章主要针对桌面浏览器,但它的部分和移动设备中的结论也比较类似,所以也是为下篇移动端viewports详解做准备。

    一、设备像素和CSS像素

      设备像素提供了我们操作设备的一个正规的分辨率,可以用screen.width/height获得。

      如果你给某个元素宽度设为128px,设备宽度1024px,默认浏览器最大化,这事,元素将占据屏幕宽度的1/8。如果用户缩放,那么这个比例将会变化。如果用户放大到200%,这个128px的元素将占据屏幕的1/4。

      在移动设备中进行缩放不过是拉伸或者压缩像素。元素宽度不会从128px变为256px,而是元素的每个像素在屏幕上的长、宽均放大了2倍,整体面积扩大了4倍。实际上,元素宽度还是128px,虽然他实际占据了256px的屏幕大小。

      我们下面用图片来解释一下:

    1.CSS像素完全覆盖设备像素

    2.缩小,CSS像素占不满设备元素

    3.放大,1css像素占据多个设备像素

      说了这么多,其实我们只需要关心CSS像素即可,只有这些才会影响我们样式表的渲染。在用户缩放或者拉伸时,浏览器会自动的拉伸或者缩放你的网页布局。

    二、屏幕尺寸

      我们可以利用screen.width和screen.height来获取屏幕宽高,这些指标是衡量一个显示屏而不是浏览器的数据,所以,实际上对我们并没什么用处。

    三、窗口大小

      相反来说,浏览器窗口的尺寸对我们就非常的重要了,它能告诉我们有多少空间能被我们用来CSS布局。我们可以利用window.innerWidth 和window.innerHeight获得。

      当用户缩小窗口时,window.innerWidth 和window.innerHeight也会做相应减少。

      注意,这一尺寸包含了滚动条的尺寸。

    四、滚动距离

      window.pageXOffset和window.pageYOffset分别代表了文档横向和纵向的滚动距离,因此,你乐意获取用户滚动的距离。

      理论上,如果使用至向上滚动页面然后缩小,window.pageX/Y会改变。但是浏览器为了保持最上方元素不变,window.pageX/Y实际不会变化。

    五、视口概念

      viewport功能就是包下html元素,也就是网站的最外层容器。

      假设你有一个width为10%的侧边栏,当用户改变浏览器大小时,侧边栏会相应变大或缩小。它到底问什么会这样呢?侧边栏拥有父元素宽度的10%,我们假设他的父元素就是body,那么body宽度是多少呢。所有块级元素都会占据父级的全部宽度,那么body宽度应该等于html宽度,而html宽度呢?

      理论上,html的宽度占据viewport的100%,viewport宽高等于浏览器窗口的大小。

    六、获取veiwport宽高

      document.documentElement.clientWidth和-Height。

      window.innerWidth/Height也能获取时候宽高,但window.innerWidth/Height包含滚动条,而ocument.documentElement.clientWidth和-Height不包含。

     七、获取html元素宽高

      document.documentElement.offsetWidth和-Height。

    八、媒体查询

    div.sidebar {
         300px;
    }
    
    @media all and (max- 400px) {
        // styles assigned when width is smaller than 400px;
        div.sidebar {
             100px;
        }
    
    }

      这里的300px相对于谁呢?

      有两种媒体查询方式:width/height 和 device-width/device-height。

    1.width/height是相对于documentElement .clientWidth/Height

    2.device-width/device-height相对于screen.width/height

  • 相关阅读:
    作业
    第一次作业
    临时和永久关闭firewalld与selinux
    联合删除
    使用CascadingDropDown实现级联式下拉框
    使用createElement动态创建HTML对象.
    关于DotNetZip的用法
    网站性能优化:cache-control设置详解
    百度蜘蛛Baiduspider User-Agent字段更新与IP判断
    (转)一个简单,方便的七牛云存储的客户端(收藏)
  • 原文地址:https://www.cnblogs.com/shytong/p/5252358.html
走看看 - 开发者的网上家园