当进行布局的时候，有时候需要div元素根据屏幕的宽度和高度进行自适应，而不是根据内容
最近用 uniapp（一种第三方 app 开发框架） 开发 app，其中一个页面有十几个 input 输入框，在点击 input 输入时，软键盘弹起，导致页面往上顶，底部的按钮也全部弹到页面上面去了，布局全被打乱。
CSS Viewport units(视口单位)在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。
CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。100vh在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。最好避免100vh ，而是依靠javascript设置高度以获得完整的视口体验。
重点：但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，
今天改移动端页面样式的时候因为height:100vh，导致我想超出部分滚动页面的效果没有做出来。就查查这玩意是啥意思。
最近项目中遇到了华为虚拟按键适配的问题，主页是个RecylerView(如下图)，如果不做适配，在界面初始化完毕后，虚拟按键会遮挡页面或者空出一些留白部分，针对这个问题上网找了些资料，总结了以下方法
说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
首先是MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免100vh，而是依赖javascript来设置高度，以获得完整的视口体验。
大家好，又见面了，我是你们的朋友全栈君。 废话不多说 , 先来看看问题 期望的样子 : 📷 实际的样子 : 📷 怎么样 , 看出问题了吧 , 那来看看代码吧 ! ( 只看有关的代码哦 ) // 此处使用stylus书写样式 .evaluation // 最外边的div width 100% height 100vh // 高度为屏幕的高度 padding-top 0.9rem background #f5f5f5 .mint-header // 头部
把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。
🔥本文前言：小程序页面设置100%高度还是留白怎么办？像小程序，app开发的时候经常会遇到设置高度，页面颜色的问题，经常出现留白没占满现象，今天专门整了一篇文章，解决这个问题。 页面设置背景色 "pages": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText": "123456", // 顶部文字 "navigationStyle": "
我们对单位很熟悉，比如说，千克，千米，米等，这些就是绝对单位，我们又有听到太阳的质量等于33个地球，这个就是相对单位。在CSS中，单位也可以分为这两类。
将picture元素和srcset,sizes属性纳入html5规范，新规范意在解决：
添加 padding-bottom后，如上图所示，此时的父元素的高度就是高度最大的子元素的高度，即上面第一个子元素的高度
总结CSS3新特性(颜色篇) 颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调)
前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹。
image-20230720145639107css3中的坐标系，rotateX就是绕着x轴旋转，rotateY就是绕着Y轴旋转，rotateZ就是绕着z轴旋转（也就是xy平面的旋转）。 perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。 translateX,translateY表现出在屏幕中的上下左右移动，transformZ 的直观表现形式就是大小变化， 实质是 XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。 比如设置了 perspective 为 200px; 那么 transformZ 的值越接近 200，就是离的越近，看上去也就越大，超过200就看不到了， 因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。 （200-transformZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时transformZ的值为0）。
https://juejin.cn/post/6951575591099301895
今天突然接到一个任务，做一个专题。那么我肯定用html+css+js写，但是由于我写了大半年的小程序，我已经忘记了动画怎么写，特效怎么写，甚至连单位布局都忘记了。
第五天任务 今天主要完成精华页面中cell内内容的处理。 cell高度的计算 cell中间内容的显示 精华模块的重构 查看图片 保存图片到相册 cell高度的计算 cell间距的设置，每个cell之间有10的间距，因为cell的重用机制，我们发现即使在tableView :didDeselectRowAtIndexPath方法中通过点击cell，减少cell的高度，当cell重新显示的时候还是会变回原来的高度，并且系统内部对cell进行了一些处理，已经在内部设置好cell的frame，所以我们通过重写cel
我们知道，如今的移动端设备分辨率五花八门，而开发过程中往往只取一种分辨率作为设计参考，例如采用1920*1080分辨率作为参考分辨率。
前言 最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。 单列布局
众所周知，可以滑动的 scroll 组件在移动端非常的重要，几乎每个页面都要用到。
CSS 提供了多种指定元素大小或长度的方式，其中一些更为直观。CSS 单位可分为四大类：
真正可用，并且简单易行，可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案，已用在一款成熟互联网应用中，效果还不错。 说起android开发，UI界面的多机型适配，一向是个很重要
导语 在前端领域，经常会遇到瀑布流布局的开发，最近整理了下相关的使用场景和解决方案，其中包含了简单算法 DP，前端基础知识，业务场景的思考。 什么是瀑布流布局 瀑布流又称瀑布流式布局，是一种比较流行的页面布局方式，英文名称为：Masonry Layouts 。与传统的分页显示不同，视觉上表现为参差不齐的多栏布局，最早由 Pinterest 首先运用。 特别是在移动端，双列瀑布流的应用更加常见，在展现呈现每个元素能够以自身的情况合理占据空间，每个元素宽高不一致，左右依次调整排列，最终占据最小的屏幕高
用截图工具（截图工具测得的像素等于物理像素）测得CSS中的1px 的等于物理像素1px的 那么他们的比值就是1：1
实用Android 屏幕适配方案分享 真正可用，并且简单易行，可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案，已用在一款成熟互联网应用中，效果还不错。 说起android开发
早就想研究一下屏幕适配这块了，主要开始我自己做的那个APP都是基于PDA的，所以不需要适配别的机形，而原本自己的那个PDA的屏幕比例也是比较特别，用他的效果在手机或是Android虚拟机上效果都不好看，差别好大，于是就想研究一下关于Android屏幕适配的框架，原来找到一个AndroidAutoLayout的框架，结果后来发现这个已经N年没再更新了，无意间发现了今日头条屏幕适配方案终极版，用了一下，真是简单又好用。
除了使用媒体查询和现代CSS布局（例如flexbox和grid）来创建响应式网站之外，我们使用一些比较不太被用或者比较新的特性来制作响应式网站。 在本文中，我们将探讨许多可用的工具（围绕HTML和CSS），从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。
Flexbox是 Flexible Box Module（弹性盒模型）的缩写。 是一种可以轻松控制html元素之间的空间分布和对齐的布局模型。
calc( )的定义 用于动态计算长度值 可以用在任何长度,数值,时间,角度,频率等处 calc( )的运算符 ＋ － ＊ ／ width:calc(50% + 15px); height:calc(100% - 20px); width:calc(15 * 4px); height:calc(100% / 4); ⚠️运算符两边需要有空格 ⚠️使用 * / 运算符时,必须保证有一个值为数值类型 calc( )使用区分 //1. css中 width:calc(100% - 20px);
app.json用 对象:字符串数组 储存 用户可能访问的路径。(注意是相对于app.json这个文件的路径。)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
和尚之前尝试过 Flutter 自带的 DropdownButton 下拉框，简单方便；但仅单纯的原生效果不足以满足各类个性化设计；于是和尚以 DropdownButton 为基础，调整部分源码，扩展为 ACEDropdownButton 自定义下拉框组件；
Android暂时还没有提供一个合适的API来获取/监听键盘的状态和高度 , 而我们又经常会有这个需求.
其实个人认为没必要做高度适配、都根据宽度vw达到一个界面适配就好了，主要是因为做高度适配得话使用vh，再小点得屏幕上 很容易就发生文本重叠、界面不美观、因为文字大小再浏览器最小是12px嘛。
以前我们整体的介绍了利用SurfaceView调用系统的Camera显示图像，并且通过NDK OpenCV的方式进行图像处理，今天这篇我们就是来介绍一下，在SurfaceView中点击显示图像中的区域进行定位，方便我们手动调整图像的。最后完整的代码会在整个系列都做完后上传到GItHub中。
从最小屏幕开始，逐渐扩大窗口，当效果丑陋不堪（like shit）时，此处就是breakpoint。
分享一个基于JQuery实现的瀑布流布局，效果如下： 📷 实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>基于JQuery实现的瀑布流布局案例</title> <style type="text/css"> * { padding: 0;
HTML5的发展改变了互联网技术趋势，前端热度依旧不减，所以对于应用开发人员前端技术也成了必备技能之一，本篇文章的目的是为了帮助萌新的入门指导，也同时希望能为老鸟起到一定查漏补缺的作用，那么让我们开始吧。
分享一个基于JQuery实现的瀑布流布局，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Co
CSS3中有两个新尺寸单位vw和vh， 这两个单位非常适合于开发移动端自适应页面。 假如说有一个设计师做了一张1136x750px的页面，这长页面是针对iPhone6的屏幕设计的。 前端开发工程师将这张设计稿转换成网页， 网页中所有的元素尺寸都用px硬编码， 那么这张网页在iPhone6中能跑的好好的，但是到了其他手机中会容易出问题， 毕竟很多手机的屏幕尺寸和iPhone6是不一样的。 vw和vh就是用来解决这个问题的。它们是一组相对尺寸单位，和百分比相似， 1vw和1vh其实和1%是一样的。换句话说， 不
因移动设备的多样性，特别是 Android 的碎片化严重，存在各种各样的分辨率，而 Flutter 跨平台开发又需同时支持 Android 和 iOS ，为尽可能的还原设计图效果提升用户体验，屏幕适配就势在必行了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
