如何在不缩放边框宽度的情况下缩放(变换) div的宽度和高度？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

如何在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

8.4K2 0

「移动端」Web页面适配

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

1.5K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

「移动端」Web页面适配

2.7K4 0

「移动端」Web页面适配

1.8K4 0

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 vw和vh中较小的那个。

3.4K3 1

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

2.6K1 0

流体布局、响应式布局

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

2.3K3 0

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

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

1.3K2 0

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

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

3.8K4 1

细说移动端经典的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，视窗未缩放而在页面标签（html和body）中，简单地配上属性代表是否需要限制宽度即可。

12.4K4 2

【Html.js——页面布局】水果摆盘（蓝桥杯真题-1767）【合集】

width: 50vw; height: 50vw;：设置宽度和高度为视口宽度的 50%，创建一个正方形区域。...max-width: 100vh; max-height: 100vh;：设置最大宽度和高度为视口高度的 100%，防止在大屏幕上布局过大。...top: 0; left: 0;：将容器定位在#board的左上角。 width: 100%; height: 100%;：设置宽度和高度为#board的 100%。...通用盒模型样式： * { box-sizing: border-box; }：设置所有元素的盒模型为border-box，使内边距和边框包含在元素的宽度和高度内。 3....为不同颜色的青蛙设置不同的背景图像，为荷叶设置背景颜色和圆形边框，并通过透明度和旋转、缩放等变换来营造出 “摆盘” 效果。为青蛙背景添加动画效果，使其具有动态感。

5240 0

移动端样式问题汇总

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 缩放比例...moz-placeholder {} / * Firefox版本19+ * / ：-ms-input-placeholder {} / * IE浏览器* / //冒号前写input或textarea等元素 // IE9和Opera12

1.1K2 0

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/right和bottom-left/right图片切片的宽度和高度则各自缩放至于对应的贴图区域一致即可深度调整图片切片尺寸 2.1

1.2K6 0

熬夜总结了 “HTML5画布” 的知识点（共10条）

用来设置填充样式 lineWidth用来设置线条的粗细 Canvas中的图形变换，渐变，文字和图片 Canvas中的图像变换 Canvas中的渐变 Canvas中的文字 Canvas中的图片 Canvas...中的图形变换图形变换都是针对坐标系来说的：平移：ctx.translate(x,y) 旋转：ctx.rotate(rad) 缩放：ctx.scale(x,y) save和restore 用来保存和恢复上下文的环境...id、宽度和高度图形绘制 ?...属性设置边框的宽度 fillStyle 属性设置填充的颜色绘制网格，网格大小 ?...context.stroke(); } 缩放变换，语法如下： scale(sx, sy); // sx为水平方向上的缩放因子，sy为垂直方向上的缩放因子 // 示例 function draw() {

8.1K2 1

重温CSS3

，column-rule-width，column-rule-color：列的边框样式，列的边框宽度，列的边框颜色 column-span：元素跨越的列的数量 column-width：列的宽度 columns...），vertical（可调整高度）不兼容IE浏览器！...在标准的W3C盒模型中：width+padding+border=元素实际宽度；height+padding+border=元素实际高度！...这救意味着我们设置width和height时，元素的实际宽度和高度往往要较之更大！当box-sizing:border-box;时，设置width或height：即是元素实际宽度或高度！...：viewport高度；initial-scale：初始化缩放比例，页面第一次加载（load）时；maximum-scale/minimum-scale：允许用户缩放最大/最小比例；user-scalable

2.1K8 0

css 笔记

rect(上-右-下-左) 如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20. ...both：用户可以调节元素的宽度和高度。 ...horizontal：用户可以调节元素的宽度 vertical：用户可以调节元素的高度。 ...多栏 Multi-column columns 设置或检索对象的列数和每列的宽度 column-width 设置或检索对象每列的宽度...HTML样式分开 separate | collapse border-spacing 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距

2.9K4 0

熬夜总结了 “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 =

8.6K1 0

css学习笔记，持续记录。

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

3.4K6 0

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

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

8581 0

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.7K1 0

点击加载更多

如何在onCreate中获取View的高度和宽度

「移动端」Web页面适配

「移动端」Web页面适配

「移动端」Web页面适配

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

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

流体布局、响应式布局

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

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

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

【Html.js——页面布局】水果摆盘（蓝桥杯真题-1767）【合集】

移动端样式问题汇总

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

熬夜总结了 “HTML5画布” 的知识点（共10条）

重温CSS3

css 笔记

熬夜总结了 “HTML5画布” 的知识点（共10条）

css学习笔记，持续记录。

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

CSS总结

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐