星云Ngx-admin，如何将nb-auth-block的宽度从35 rem更改为全宽？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

盘点：响应式布局的5种实现方式

border-radius 为百分比，则是相对于自身的宽度缺点：计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。...1rem = 10px，所以 box 盒子的宽高分别为：100px 和 200px; 当我们把 html 中 font-size: 20px; 时，此时 1rem = 20px,此时 box 盒子的宽高就为...200px 和 400px; 2、实际开发中如何适配，如何将设计稿对应的 px 单位转换为 rem 单位在实际的开发中，我们通常会以 750px 的移动端设计稿来开发。...: red; } 如果我们把总宽 750px 分成 10rem，些时 1rem = 75px; ，转成对应的 rem 单位，就是用对应的 px/75px，得到如下结果。...100vw = 视图窗宽度，100vh = 100 视图窗高度如果移动端有 5 个不同的视口宽尺寸 750 ，640，480，375，320，则在不同尺寸下，对应的 1vw 的 px 值如下表移动端尺寸

3.4K0 0

CSS 框架 Bulma 教程

使用更简单，就是为 HTML 元素加上class。...，平板三分之一宽度，桌面四分之一宽度，宽屏和高清则是平铺。...is-size-7： 0.75rem 可以为不同设备指定不同的文字大小。...有一些 Bulma 变量是从基础变量衍生的，需要的话也可以改掉。 $primary: $pink 上面代码中，主色调改成了pink变量。接着，在这个文件里面加载 Bulma 的入口脚本。...全栈工程师技能大全 WEB前端性能优化常见方法一小时内搭建一个全栈Web应用框架干货：CSS 专业技巧四步实现React页面过渡动画效果让你分分钟理解 JavaScript 闭包 ----

3K3 0

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

是的

没有找到

前端工程师之移动端布局方案

1 移动端布局方案 1.1 百分比布局（流式布局）百分比布局是一种等比例缩放的布局方式，也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高。...48px*35px 大小的元素 */ box1{ width:48px; height:35px; } /* 用 vh/vw 布局 */ box1{ width:6.4vw;...对于 1080px 宽的设计稿，设置默认根字号的大小为 100px，那么设计稿中 1px 对应的是 100vw/1080 = 0.0925926vw，并且 1rem = 100px，也就可以得到 1rem...rem+vw/vh 布局实用性 rem 弹性布局方式作为移动端 web 页面适配方法，后期从 rem 过渡到 vw ，只需要通过改变根元素大小的计算方式不需要其他处理。...一个页面上，元素的宽度设置上有百分比，也有 rem，字体的样式中有 rem，有 em，也有固定大小的 px；在屏幕宽度过大时不再缩放，也会用到媒体查询，并且响应式设计更多地可能是针对不同设备间的自适应

1.2K1 0

移动端布局方案

1 移动端布局方案 1.1 百分比布局（流式布局）百分比布局是一种等比例缩放的布局方式，也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高。...48px*35px 大小的元素 */ box1{ width:48px; height:35px; } /* 用 vh/vw 布局 */ box1{ width:6.4vw;...对于 1080px 宽的设计稿，设置默认根字号的大小为 100px，那么设计稿中 1px 对应的是 100vw/1080 = 0.0925926vw，并且 1rem = 100px，也就可以得到 1rem...rem+vw/vh 布局实用性 rem 弹性布局方式作为移动端 web 页面适配方法，后期从 rem 过渡到 vw ，只需要通过改变根元素大小的计算方式不需要其他处理。...一个页面上，元素的宽度设置上有百分比，也有 rem，字体的样式中有 rem，有 em，也有固定大小的 px；在屏幕宽度过大时不再缩放，也会用到媒体查询，并且响应式设计更多地可能是针对不同设备间的自适应

1.3K1 0

前端架构师之路02_移动端布局方案

1 移动端布局方案 1.1 百分比布局（流式布局）百分比布局是一种等比例缩放的布局方式，也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高。...，因此有一定的像素差 vh/vw 布局计算 100vw = 750px（设计图的像素） 0.13333333333333333333vw = 1px /* 设计图中一个 48px*35px 大小的元素...对于 1080px 宽的设计稿，设置默认根字号的大小为 100px，那么设计稿中 1px 对应的是 100vw/1080 = 0.0925926vw，并且 1rem = 100px，也就可以得到 1rem...rem+vw/vh 布局实用性 rem 弹性布局方式作为移动端 web 页面适配方法，后期从 rem 过渡到 vw ，只需要通过改变根元素大小的计算方式不需要其他处理。...一个页面上，元素的宽度设置上有百分比，也有 rem，字体的样式中有 rem，有 em，也有固定大小的 px；在屏幕宽度过大时不再缩放，也会用到媒体查询，并且响应式设计更多地可能是针对不同设备间的自适应

9761 0

探讨移动端适配

电视的图像是由按一定间隔排列的亮度不同的像点构成的，形成像点的单位也就是像素，组成图像的最小单位就是像素。从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位。...可以看出CSS像素是一个相对的像素而非绝对像素案例在一个物理像素为 1280x1024 的显示器放置一个宽高100px的容器 .box1{ height: 100px...但是浏览器是如何将css像素转换为物理像素的呢？...用户是否可以缩放移动端布局适配解决方案 rem+flexible rem+css预处理+媒体查询与rem+flexible.js做网页适配 vw，vh 1.vw：1vw等于视口宽度的1% 2...); padding-bottom: vw(26); border-bottom: 1px solid #eaeaea; } rem+vw适配方案但是上面的方法还不够完美，我们每次从设计图测得一个单位

2.2K1 0

CSS 你到底有多少长度单位？

从 em 和 rem 的含义上来说， 1em 表示与当前元素字体的宽度，准确来说是一个大写字母M的宽度 1rem 则表示默认字体大小的宽度，同样实质上也是一个大写字母M的宽度两者的差别只是...但它的表现不像 em 那样稳定，比如在 IE 下 ex 正好是 em 的一半，在火狐下更接近字体的实际高度，所以我们一半认为 ex ≈ em / 2 。...1ch 表示一个数字 0 的宽度。...视口宽高对应 window.innerWdith 和 window.innerHeight 而当前的兼容性如下： CSS3 其他新特性的搭配使用从几个案例来研究下 1....等比伸缩布局不是万能的，让 ipad 和 iphone 显示完全一样的等比放大的内容本身就是偷懒的方案，如何设计好自适应和响应式的结合是产品线从设计开始就得考虑的内容。

6882 0

CSS 中的相对单位

实际上，rem 结合了 px 和 em 的优点，既保留了相对单位的优势，又简单易用。那是不是应该全用 rem，抛弃其他选择呢？答案是否定的。...视口的相对单位 vh: 视口高度的 1/100 vw：视口宽度的 1/100 vmin：视口宽、高中较小的一方的 1/100（IE9 中叫 vm，而不是 vmin） vmax：视口宽、高中较大的一方的...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。

1.7K2 0

移动端H5通过flexible.js+rem自适应适配方案

一、 rem实际开发适配方案 (1)按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小; (2)CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值...; 技术方案1 技术方案2 媒体查询 flexible.js rem rem less vscode插件cssrem 总结:两种方案都可以，一般推荐第二种方案，更简单操作二、简洁高效的rem配方案flexible.js...我们要做的,就是确定好我们当前设备的html文字大小就可以了比如当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/ 10)就可以里面页面元素rem值:页面元素的...px值/ 75 剩余的,让flexible.js来去算页面元素大小取值方法 ①最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)) ②屏幕宽度/划分的份数就是html...rem 注意： cssrem默认的html字体大小cssroot为16px ，因此要修改为此时的75px；修改方法:在vscode设置中查找cssroot，设置为75，设置完成后重新启动vscode

2K5 0

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

2、设计方法：　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局...但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。...important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !...缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。...rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

12.7K3 3

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

35、nth-of-type和nth-child的区别 36、有什么方式可以对一个DOM设置它的CSS？ 37、CSS中，自适应的单位都有哪些？ 38、为什么css放在顶部而js写在后面？...即决定元素的宽高如何计算，box-sizing有三个属性： content-box 使得元素的宽高即为内容区的宽高(默认模式) border-box: 计算方式content + padding + border...17、在网页中的应该使用奇数还是偶数的字体？为什么呢？使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。...Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。...解决：父元素position改为absolute或static；元素没有设置position属性为非static属性。

4.2K2 0

响应式布局的五种实现方法

不能用百分比设置的，先看一个简单例子：顶部是利用设置图片 width: 50%来适应不同的分辨率，由于原始图片高度不同，所以第一张图片顶部会有空白，这种情况最好两张图片宽高保持一致，如果使用强制高度统一...，会导致图片变形；注意：当屏幕大于图片的宽度时，会进行拉伸；解决拉伸方法就是改为 max-width: 50%，但当屏幕大于图片的宽度时，两边会有空白。...媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套 css 样式；分辨率拆分可视项目具体情况而定。注意：IE6、7、8 不支持媒体查询。...方案三.rem 响应式布局当前页面中元素的rem 单位的样式值都是针对于html 元素的font-size 的值进行动态计算的，所以有两种方法可以达到适配不同屏幕：第一种利用媒体查询，在不同分辨率下给...，则样式改为font-size: 3.2vw，下面是我经常使用的工具，有利于提高转换效率。

5K6 0

响应式设计

媒体查询使用@media规则选择满足特定条件的设备。 /** * 只有当设备的视口宽度大于等于 560px 的时候，才会给标题设置 2.25rem 的字号。...只要网页宽度达到 35em（或者 560px），标题的字号马上就会变成 2.25rem。 # 媒体查询的类型可以进一步将两个条件用 and 关键字联合起来组成一个媒体查询。...在流式布局中，主页面容器通常不会有明确宽度，也不会给百分比宽度，但可能会设置左右内边距，或者设置左右外边距为 auto，让其与视口边缘之间产生留白。也就是说容器可能比视口略窄，但永远不会比视口宽。...在主容器中，任何列都用百分比来定义宽度（比如，主列宽 70%，侧边栏宽 30%）。这样无论屏幕宽度是多少都能放得下主容器。...不支持的浏览器会根据 src 属性加载相应的 URL。这种方式允许针对不同的屏幕尺寸优化图片。更棒的是，浏览器会针对高分辨率的屏幕做出调整。图片作为流式布局的一部分，请始终确保它不会超过容器的宽度。

4.7K1 0

第134天：移动web开发的一些总结（二）

height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orientation：检查设备处于横向（landscape）还是竖屏（portrait...设计点二：弹性图片思路：无论何时，全都包在图片的元素宽度范围内，以最大的宽度同比完整的显示图片。...em：是根据父节点的font-size为相对单位 rem：是根据html的font-size为相对单位 em在多层嵌套下，变得非常难以维护，rem更加能作为全局统一设置的度量那么，rem的基值设置为多少比较好...回归目的：为了适应各大手机屏幕 rem = screen.width / 20 不使用rem的情况：font-size 一般来讲font-size是不应该使用rem的相对单位的。...因为字体的大小是趋向于阅读的实用性，并不适合于排版布局。同理，趋向于一些固定的元素的特性。我们不使用rem而改为使用px去确保在不同屏幕上表现一致（跟rem的目的相反）。

2.4K1 0

css-in-js 探讨

例如，可以使用一种语言来生成更详细的语言（通常是HTML）的代码。这是前端框架的关键作用之一 -操作HTML。...我们只对修改此组件的宽度感兴趣。...您可以通过属性看到渲染图像的宽度从200px开始，然后当视口宽度变为至少30rem时，宽度增加到400px宽。...请注意，我们可以在我们的样式中插入几乎任何东西。此特定示例演示了如何将媒体查询保存在变量中并在多个位置重用它。...最值得注意的是，通过使用CSS-in-JS，我们基本上从CSS生态系统中退出并使用JavaScript来解决我们的问题。

6.9K2 0

CSS 框架 Bulma 教程

使用更简单，就是为 HTML 元素加上class。...，平板三分之一宽度，桌面四分之一宽度，宽屏和高清则是平铺。...is-size-1： 3rem is-size-2： 2.5rem is-size-3： 2rem is-size-4： 1.5rem is-size-5： 1.25rem is-size-6： 1rem...有一些 Bulma 变量是从基础变量衍生的，需要的话也可以改掉。 $primary: $pink 上面代码中，主色调改成了pink变量。...（全文完） ================================ 优秀的人才不缺工作机会，只缺适合自己的好机会。但是他们往往没有精力，从海量机会中找到最适合的那个。

2.2K4 0

CSS面试题

大家好，又见面了，我是你们的朋友全栈君。 CSS选择器及其优先级 !...：相对单位，相对父节点的字体大小 rem：相对单位，相对于根节点html的字体大小 vw:天生就是随着屏幕的宽度变化而变化 css几种定位方式？...属性值作用 none 元素不显示，并且会从文档流中移除。...既在网页中不占任何的位置。 block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。...inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 list-item 像块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示。

6424 0

什么是移动端开发【重点学习系列—干货十足–一万字详解】

大家好，又见面了，我是你们的朋友全栈君。引言这一篇文章主要对移动端开发相关的基础知识点，进行总结。...视觉视口视觉视口就是用户可见的区域。获取方式注：不缩放的情况下，视觉视口宽度 == 布局视口宽度。理想视口宽度与屏幕同宽的布局视口称为理想视口。...适配的方式主要有两种 viewport 适配 rem 适配 viewport 适配拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后量尺寸进行布局即可。...，再进行适配完美视口设置设计稿总宽 375 布局设置 font-size 100px 尺寸转为 rem 增加 JS 代码进行页面适配 document.documentElement.style.fontSize...= document.documentElement.clientWidth*100/375+'px'; 方法二编写时按照 IPhone 6 直接使用 rem 单位进行布局完美视口设置设计稿总宽

3.4K2 1

某IT培训班一阶段前端面试题

请简述 CSS 盒子模型CSS 盒子模型是浏览器渲染元素的基础，每个元素都被视为一个“盒子”，由内到外分为 4 部分，核心分为两种模式：（1）盒子组成（从内到外）content（内容区）：存放元素内容（...（2）块级元素（block）特点：独占一行，宽高可设置，margin/padding 水平垂直都生效，默认宽度为父元素 100%。...嵌套组件中，若父元素设置 font-size，可能导致 rem 计算混乱（需确保仅根元素控制 rem）。替代方案：移动端可用 vw/vh 单位，无需设置根元素 font-size，更适配响应式。...（向上/下/左/右，无边框）核心：宽高设为 0，3 个边框透明，1 个边框设为目标颜色，调整边框宽度控制三角形大小。...35. viewport 的作用viewport（视口）是“浏览器显示页面内容的区域”，核心作用是“适配移动端设备”，解决移动端页面“缩放异常、布局错乱、显示模糊”问题，通过 meta 标签配置（移动端开发必写

1862 0

写给设计师的移动页面适配小知识

话说从设计稿到前端页面实现，是产品流程中非常重要的一环，这个阶段决定了设计师设计的设计稿能否完美地变成真正的产品雏形。...前端适配方案前端的适配方案大致分为四种：1，根据 meta 按比例缩放；2，根据页面宽度百分比适应；3，基于媒体查询的响应式方案；4，REM缩放方案。...1，根据 meta 按比例缩放这种方案的实现更偏技术，大致原理是根据设备的分辨率及像素比等信息，计算出页面的缩放（scale）数值，来进行等比缩放。...例如微信购物入口中的京东购物，目前仍然采用这种方案。这种方案的主要表现就是，在比基准设备（如 640x960px）宽的设备上，页面元素的横向宽度是按百分比自适应的，但是高度不会变化。...效果：按设计稿尺寸除以2，元素宽度使用百分比实现场景：平台型页面，页面布局不是很复杂优点：可以适应几乎所有设备缺点：横向拉宽会使布局比例失调，且复杂结构百分比实现有难度 3，基于媒体查询的响应式方案

1.1K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭