文档章节

尺寸1

 金于虎
发布于 2016/10/27 11:34
字数 446
阅读 7
收藏 0

##1. 屏幕尺寸(与设备分辨率) 让我们来关注一些实际的尺寸,首先先从 screen.width 与 screen.height 说起。即用户屏幕的高度与宽度。我们用设备像素来描述这一尺寸,因为其永远不会变化:注意这是显示器的特性而非浏览器,不要混淆。

输入图片说明

调整分辨率 (只是电脑可以手动调整) console.log(window.innerWidth);

  1. 1440*900
  2. 1280*800

##2. window尺寸(浏览器尺寸,与浏览器宽度有关)

相反,你需要知道的是浏览器window的内在尺寸。它能反映出用户能使用多少空间来进行CSS布局。你能通过 window.innerWidth 与 window.innerHeight 获取。

输入图片说明

window尺寸 使用css尺寸就可以放大缩小了

,window的内部宽度使用CSS像素衡量。你必须要知道你的布局有多少显示在浏览器窗口中,并且当用户放大时它们的尺寸时如何减少的。因此,如果用户进行放大操作时,你在window上的可用空间将会变小并且window.innerWidth/Height也将变小。

(注:这里虽然进行了放大操作,但由于只是每个css像素点变大(设备宽度无变化)且css的尺寸并没有改变,所以能呈现在窗口中的尺寸反而时减小的)

(设备像素没有变,一个css像素占据更多设备像素,所以css尺寸变小了)

(对于Opera存在例外情况,即当用户进行放大操作时,其浏览器的window.innerWidth/Height并没有缩小。这是由于在Opera 使用设备宽度而非CSS宽度衡量。这在桌面端无关痛痒,但在移动端确实致命的,我们将在稍后进行讨论。)

© 著作权归作者所有

上一篇: PC端的viewport
下一篇: 像素1
粉丝 1
博文 112
码字总数 46834
作品 0
曲靖
私信 提问
机械制图基础知识,莫莫总结的精华全在这里了!

     一、常用绘图工具   1.图板 图板是用来固定图纸的矩形木板。其要求:   (1)板面平整、光滑;   (2)左侧的“导边”应平直。   #常用图板规格:   0号(900mm×1200m...

UG数控编程
2018/06/03
0
0
最近学习相关序列模型的一点记录

之前看了一个用rnn作诗、写文章比较典型的例子:https://github.com/hzy46/Char-RNN-TensorFlow其训练过程: 假设batchsize=2,序列长度为5,原文章:12345642985718041937... 输入x:[[1 2 3...

zoulala
2018/09/05
2
0
【LeetCode】455. Assign Cookies (java实现)

原题链接 https://leetcode.com/problems/assign-cookies/ 原题 Assume you are an awesome parent and want to give your children some cookies. But, you should give each child at mos......

BookShu
2016/11/23
119
0
App 切图规范

如何切图? 了解iphone界面的尺寸 最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x)。 在实际设计过程中,为了降低设计成本,一般拿...

iSnowFlake
2016/03/01
74
0
ios8新特性屏幕适配之sizeclass

ios8推出也有一段时间了,由于时间比较紧,所以没去学习ios8的新特性,随着iphone6,6+的推出,ios屏幕适配是一个大问题,如何成功适配各种尺寸以及ipad呢?苹果公司为了解决这个问题给出了新...

哥特复心
2014/12/08
10.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

编程作业20190210900169

1编写一个程序,提示用户输入名和姓,然后以“名,姓”的格式打印出来。 #include <stdio.h>#include <stdlib.h> int main(){ char firstName[20]; char lastName[20]; print......

1李嘉焘1
29分钟前
6
0
补码的优点及原理分析

只讨论整数 1.计算机内部为什么没有减法器? 减法运算本身其实就是加法,如x - y即x +(-y),所以只需要将负数成功表示出来并可以参加加法运算,那加法器就可同时实现“+”和“-”的运算。这...

清自以敬
45分钟前
70
0
Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
今天
7
0
Spring Security 实战干货:必须掌握的一些内置 Filter

1. 前言 上一文我们使用 Spring Security 实现了各种登录聚合的场面。其中我们是通过在 UsernamePasswordAuthenticationFilter 之前一个自定义的过滤器实现的。我怎么知道自定义过滤器要加在...

码农小胖哥
今天
9
0
常见分布式事务解决方案

1 微服务的发展 微服务倡导将复杂的单体应用拆分为若干个功能简单、松耦合的服务,这样可以降低开发难度、增强扩展性、便于敏捷开发。当前被越来越多的开发者推崇,很多互联网行业巨头、开源...

asdf08442a
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部