首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

何在onCreate中获取View高度宽度

何在onCreate中获取View高度宽度 在开发过程中经常需要获取到View宽和高,可以通过View.getWidth()View.getHeight()来得到宽高。...然而新手们经常在onCreate方法中直接调用上面两个方法得到值是0! 这是为什么呢? 因为View绘制是通过两个遍历来完成,一个measure过程,一个layout过程。...只有经过“测量”“布局”之后,View才能正确地完成绘制。而这一切是发生在onCreate方法之后。...所以在onCreate中直接使用View.getWidth()View.getHeight()是无法得到正确。 那应该怎么onCreate中获取View宽高呢?...savedInstanceState); view.post(new Runnable(){ public void run(){ //在这里使用View.getWidth()View.getHeight

5.3K20

「移动端」Web页面适配

由于手机机型较多,各个手机屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓ios各种尺寸设备兼容问题,我们要做 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...,是一个数字,可以是小数 height - 设置layout viewport高度,这个属性很少使用 一般情况下禁止用户缩放网页,设置时候只需要: <meta name="viewport" content...viewport 设置可视区之后,就会把网页宽度设置为移动设备屏幕宽度想深入学习,可查阅《viewport深入理解使用 - 前端人 - 博客园》。...align-content 定义多根轴线对齐方式 容器内子元素增加,布局所占系数:: <div class...长度单位可分为两种:相对单位绝对单位。 绝对单位:长度是固定值,反应物理真实尺寸。:px像素,一个像素相当于我们屏幕一个小点,屏幕实际就是由很多个像素点组成,不同显示器像素大小不同。

1.4K40
您找到你想要的搜索结果了吗?
是的
没有找到

「移动端」Web页面适配

由于手机机型较多,各个手机屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓ios各种尺寸设备兼容问题,我们要做 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...,是一个数字,可以是小数 height - 设置layout viewport高度,这个属性很少使用 一般情况下禁止用户缩放网页,设置时候只需要: <meta name="viewport" content...viewport 设置可视区之后,就会把网页宽度设置为移动设备屏幕宽度想深入学习,可查阅《viewport深入理解使用 - 前端人 - 博客园》。...align-content 定义多根轴线对齐方式 容器内子元素增加,布局所占系数:: <div class...长度单位可分为两种:相对单位绝对单位。 绝对单位:长度是固定值,反应物理真实尺寸。:px像素,一个像素相当于我们屏幕一个小点,屏幕实际就是由很多个像素点组成,不同显示器像素大小不同。

1.2K40

「移动端」Web页面适配

由于手机机型较多,各个手机屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓ios各种尺寸设备兼容问题,我们要做 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果,或等比缩放。...,是一个数字,可以是小数 height - 设置layout viewport高度,这个属性很少使用 一般情况下禁止用户缩放网页,设置时候只需要: <meta name="viewport" content...viewport 设置可视区之后,就会把网页宽度设置为移动设备屏幕宽度想深入学习,可查阅《viewport深入理解使用 - 前端人 - 博客园》。...align-content 定义多根轴线对齐方式 容器内子元素增加,布局所占系数:: <div class...长度单位可分为两种:相对单位绝对单位。 绝对单位:长度是固定值,反应物理真实尺寸。:px像素,一个像素相当于我们屏幕一个小点,屏幕实际就是由很多个像素点组成,不同显示器像素大小不同。

2.2K40

57道常被问CSS面试题及答案汇总,帮你查漏补缺

等,当按百分比设定它们时,依据也是父容器宽度,而不是高度。...元素被当成行内元素排版时候,原来html代码中回车换行被转成一个空白符,在字体不为0情况下,空白符占据一定宽度,所以inline-block元素之间就出现了空隙。...:transform:translateY(20px): 三、缩放scale 缩放scale移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向垂直方向同时缩放(...:transform:skewY(10deg) 五、矩阵matrix matrix(, , , , , ) :以一个含六值(a,b,c,d,e,f)变换矩阵形式指定一个2D变换,相当于直接应用一个...vh viewpoint height,视窗高度,1vh=视窗高度1% vw viewpoint width,视窗宽度,1vw=视窗宽度1% vmin vwvh中较小那个。

2.4K31

57道CSS常问面试题及答案汇总

等,当按百分比设定它们时,依据也是父容器宽度,而不是高度。...元素被当成行内元素排版时候,原来html代码中回车换行被转成一个空白符,在字体不为0情况下,空白符占据一定宽度,所以inline-block元素之间就出现了空隙。...:transform:translateY(20px): 三、缩放scale 缩放scale移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向垂直方向同时缩放(...:transform:skewY(10deg) 五、矩阵matrix matrix(, , , , , ) :以一个含六值(a,b,c,d,e,f)变换矩阵形式指定一个2D变换,相当于直接应用一个...vh viewpoint height,视窗高度,1vh=视窗高度1% vw viewpoint width,视窗宽度,1vw=视窗宽度1% vmin vwvh中较小那个。

2K10

流体布局、响应式布局

布局问题 首先写四个div ? 按照百分比来设定宽度,无论如何缩放浏览器,这四个div都会自动调整大小。那么如果设置一个边框呢? 设置边框 ?...流体布局 流体布局,就是使用百分比来设置元素宽度,元素高度按实际高度写固定值,流体布局中,元素边线无法用百分比,可以使用样式中计算函数 calc() 来设置宽度,或者使用 box-sizing...使用box-sizing方式解决上面的布局问题 1、content-box 默认盒子尺寸计算方式 2、border-box 置盒子尺寸计算方式为从边框开始,盒子尺寸,边框内填充算在盒子尺寸内...当浏览器缩放宽度小于800px,那么div大小就变为50% ?...当浏览器缩放宽度小于500px,那么div大小就变为98% 这就是响应式布局了,根据宽度变化,响应变化相关样式,达到适配不同浏览器大小。

2K30

【CSS】盒子模型内边距 ③ ( 盒子模型内边距案例 | 使用 Fireworks 分析网页 | 缩放图片 | 切片工具测量图片 | 吸管工具获取图片颜色 | 代码示例 )

文章目录 一、盒子模型内边距案例 二、使用 Fireworks 分析网页 1、导入图片 2、缩放图片 3、切片工具测量图片 4、吸管工具获取图片颜色 5、测量结果 三、代码示例 一、盒子模型内边距案例...---- 模仿 CSDN 博客界面的导航栏 , 将下图中 矩形框 中导航栏 样式写出来 ; 案例分析 : 导航栏宽度固定 , 有的链接宽度很窄 , " 最近 " , " 课程 " 等..., 只有 2 个字 , 有的链接很长 , " 关注/订阅/互动 " , 字数很多 , 这样就不适合为其设置一个固定宽度 ; 最佳方案 是 为 链接 选项 设置一个内边距 , 让其宽度自适应 ; 二、...5、测量结果 测量 导航栏 整体 高度 为 48 像素 , 没有 上左右 边框 , 整体背景为白色 ; 下边框 1 像素 , 颜色值为 #E8E8ED , 文本高度 15 像素 ,...文本颜色为 #222226 , 这是鼠标经过时样式 , 鼠标没有经过时颜色值为 #555666 ; 鼠标经过时 , 下边框为 2 像素 , 颜色值 #222226 ; 三、代码示例 ---- 代码示例

1.1K20

可视化大屏几种屏幕适配方案,总有一种是你需要

> 判断窗口宽度高度是否大于画布宽高,是的话通过left或top来调整: 自适应宽度宽度适应屏幕,高度不变,这种方案缺点是垂直方向上会出现滚动条。...实现也很简单,计算一下画布原始比例,再计算一下屏幕比例,然后再判断是宽度屏幕一致,高度自适应,还是高度屏幕一致,宽度自适应: // 当前窗口宽高比例 let windowWidth = window.innerWidth...第一种情况,假设画布宽是高两倍,那么比例为2,要保持原比例2适应屏幕,显然只能宽度屏幕一致,高度自适应,因为如果高度屏幕一致,那么宽度需要是高度两倍,屏幕显然显示不下: 第二种情况,假设画布高是宽两倍...,那么比例为0.5,要保持比例为0.5适应屏幕,需要高度屏幕一致,宽度自适应: 计算完了画布适应屏幕后新宽高,接下来就可以计算它相对于画布原始宽高缩放比例: // ... // 相对于画布原始宽高缩放比例...> 显示位置似乎有点问题,这其实是因为默认情况下元素变换都是以自身中心点为原点进行变换: 我们只要改成以左上角为原点即可: const canvasStyle = reactive({

2.9K41

细说移动端 经典REM布局 与 新秀VW布局

缩放比 scale 缩放比:scale = 1/dpr 视窗 viewport 简单理解,viewport是严格等于浏览器窗口。在桌面浏览器中,viewport就是浏览器窗口宽度高度。...来做计算 视窗单位 vw : 1vw 等于视窗宽度1% vh : 1vh 等于视窗高度1% vmin : 选取 vw vh 中最小那个 vmax : 选取 vw vh 中最大那个 ?...单边边框比较简单,本质是在目标元素上加个伪类,设置宽度(左|右边框)或高度(上|下边框)为1px,然后在高清屏幕下对齐进行缩放 transform-origin: 0 0; transform: scaleY...要让伪类支持设置多边边框,已经不能仅仅使用宽度高度,而应该在这个伪类上设置多边边框,然后设置dpr倍宽高,再进行缩放(自左上方) width: 200%; height: 200%; transform-origin...直接使用宽度值,因为使用是vw,视窗未缩放 而在页面标签(htmlbody)中,简单地配上属性代表是否需要限制宽度即可。

11.8K42

移动端样式问题汇总

1,去掉移动端苹果手机点击时阴影 div { -webkit-tap-highlight-color:rgba(0,0,0,0); } 2,输入去掉边框,单击阴影,下划线 输入{ 边界:0; 大纲:无...高度:12px; 边框底部:1px实心#999; 右边框:1px实线#999; 变换:rotate(-45deg); } 4,超过1行/ 2行显示省略号 .line-1 { 宽度:100px; 空白:...//控制多行行数 -webkit-box-orient:垂直; } 5,水平/垂直居中定位 //绝对定位未知高度,距顶部,左边50%,然后转换:translate(-50%,-50%),不支持IE9...7795174.html <meta name =“ viewport” content =“ width = device-width,初始比例= 1.0,最小比例= 1.0,最大比例= 1.0,用户可缩放比例...moz-placeholder {} / * Firefox版本19+ * / :-ms-input-placeholder {} / * IE浏览器* / //冒号前写input或textarea等元素 // IE9Opera12

84420

CSS魔法堂:重拾Border之——图片作边框

3个和尚有水喝 目标元素本身(即上面的div元素) 用作边框素材图片(即上面的border.png) 贴图区(Border Image Area) 引入图层概念  用过PS或Flash同学应该都清楚图层概念吧...切片尺寸为0;  因此默认情况下border-image-slice: 100%,所以top/right/bottom/left/middle切片尺寸均为0,而4个角top-left/right...4条灰色线表示切割线,它们图片4条边框一起把图片划分为九宫格,得到以下9幅切片。 ?...将素材图片各切片移至贴图区中对应区域; 1.2. top/bottom图片切片高度缩放至于对应贴图区域高度一致,并以相同缩放比来调整图片切片宽度; 1.3. left/right图片切片宽度缩放至于对应贴图区域宽度一致...,并以相同缩放比来调整图片切片高度; 1.4. top-left/rightbottom-left/right图片切片宽度高度则各自缩放至于对应贴图区域一致即可 深度调整图片切片尺寸 2.1

1K60

实现3D环绕效果图片展示技术探索

但通常情况下,DOMContentLoaded 对于大多数DOM操作来说已经足够了。....具体来说,.product-container 样式定义可能包含以下几个关键点:尺寸与位置:通过设置宽度(width)、高度(height)、以及可能 margin padding 属性,可以定义容器大小和它与周围元素空间关系...这些转换包括平移(translation)、缩放(scale)、旋转(rotation)、倾斜(skew)以及矩阵变换(matrix)。...这可以通过translate()函数实现,该函数接受两个参数,分别表示水平方向垂直方向移动量。参数可以是正数、负数或百分比。缩放(Scale):缩放是指改变元素大小。...这可以通过scale()函数实现,该函数接受两个参数,分别表示水平方向垂直方向缩放比例。如果只指定一个参数,那么水平方向垂直方向将按相同比例缩放

15110

熬夜总结了 “HTML5画布” 知识点(共10条)

,曲线,边框样式 fillStyle用来设置 填充样式 lineWidth用来设置线条粗细 Canvas中图形变换,渐变,文字图片 Canvas中图像变换 Canvas中渐变 Canvas...中文字 Canvas中图片 Canvas中图形变换 图形变换都是针对坐标系来说: 平移:ctx.translate(x,y) 旋转:ctx.rotate(rad) 缩放:ctx.scale(x...drawImage(image, x, y, width, height) // 在画布上定位图像,并规定图像宽度高度 drawImage(image, sourceX, sourceY, sourceWidth...id、宽度高度 图形绘制 需要理解些概念: 路径概念 路径绘制 描边 stroke...属性设置边框宽度 fillStyle 属性设置填充颜色 绘制网格,网格大小 var grid = 10; // 画多少条x轴方向线,横向条数,画布高度 var canvasHeight =

7.5K10

css学习笔记,持续记录。

,可以指定一个值, 600,或者特殊值, device-width 为设备宽度(单位为缩放为 100% 时 CSS 像素)。...height: width 相对应,指定高度。 initial-scale:初始缩放比例,也即是当页面第一次 load 时候缩放比例。 maximum-scale:允许用户缩放最大比例。...initial-scale属性用于设置页面初始缩放比例,缩放比例为理想视口与视觉视口比值。 理想视口:文档宽度屏幕宽度一致。...21. object-fit object-fit CSS 属性指定可替换元素内容应该如何适应到其使用高度宽度确定框。...增加去除边框 增加去除边框导致元素大小发生变化,同时影响到其他元素产生位移偏差感:可以调整为边框一直存在,当不需要展示时显示透明,需要时候再展示颜色。

2.6K60

CSS总结

{属性:值} :p,div,h1,table{属性:值}。   5.标签指定式选择符:如果既想使用id或class,也想同时使用标签选择符。     ...  [6]:当父元素没有指定高度并且子元素有浮动时,这个父元素高度不会自动增加. [7]:在给盒子父盒子加居中时,一定要有宽度才能使得父盒子居中....九、CSS元素分类 [1].块状元素:{display:block}一般是其他元素容器,可容纳内联元素其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用...[2].内联元素:{display:inline}内联元素只能容忍文本其他内联元素,它允许其他元素与其同一行,但宽度高度变得不起作用,常见内联元素有:em、span、a等(不能设置宽和高,不影响换行...十、部分CSS样式详解   1.CSS溢出  功能:设置当对象内容超过其指定高度宽度时如何显示      语法:Overflow:visible(默认值,剪切内容,也添加滚动条)

2.1K10

【前端基础面试题】如何用CSS画一个三角形(详解)

疑问                 为什么直接设置一个边框一个三角形                 宽高为什么设置为0,设置宽高区别 ---- 教学         思路   加粗边框,...               这样设置的话什么都不会显示,我就不截图了,设置单条边框宽度一样没有。...所以不会设置一条边框,就变成三角形。                宽高为什么设置为0,设置宽高区别                         我们把宽度高度取消,单设置一条边框。...">             结果就是一条高度100px线条,宽度不知道是多少,div默认宽度为父元素100%,也就是占了body宽度,  这是设置宽高 光设置边框结果...,所以为了得到任意四个三角形一个  我们要设置 宽高,将宽高设置成0px,缩小中心点让它变成三角形而不是梯形,也改变了默认100%宽度属性。

50220
领券