文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

2、设计方法： 　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 　　移动设备：另外建立移动网站，单独设计一个布局...【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】 2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率...2、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。...但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。...工具ViewtoREM：PX转换到REM（自动预处理） rem的定义：font size of the root element，rem是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值

10K33

vue:将px转化为rem，适配移动端vant-UI等框架(postcss-pxtorem)

1.下载lib-flexible 使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入....postcssrc.js 在根目录找到.postcssrc.js文件，可以在此配置的基础上根据项目需求进行修改，如： module.exports = { plugins: { //.....browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 37.5, //vant-UI的官方根字体大小是...通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把rootValue设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。...之所以设为37.5，是为了引用像vant、mint-ui这样的第三方UI框架，因为第三方框架没有兼容rem，用的是px单位，将rootValue的值设置为设计图宽度（这里为750px）75的一半，即可以

1.3K30
您找到你想要的搜索结果了吗？
是的
没有找到

08-移动端开发教程-移动端适配方案

页面加载完成后用js动态根据dpr改变页面的缩放值 推荐使用： flexible方案 2....font-size: 1.8rem; /* 也可以根据媒体查询适当调整字体大小 */ text-align: center; position: relative; } ...html {font-size: 100px;} } 以上参考代码的意思是： 根据CSS的媒体查询设备的屏幕的宽度，根据宽度的大小设置密集的html根元素的字体大小。...3.2 js实现动态改变根元素的字体大小 通过js动态获取屏幕的宽度（document.clientWidth）然后根据屏幕宽度动态计算出rem的实际值。...比如： 头像在不同设备上一般都会设置固定像素的大小 宽度可能超过50%的盒子尽量用百分比或者弹性盒子布局 高度和宽度需要同时根据屏幕自动缩放的时候，推荐使用rem布局 5.

3K60

08-移动端开发教程-移动端适配方案

页面加载完成后用js动态根据dpr改变页面的缩放值 推荐使用： flexible方案 2....font-size: 1.8rem; /* 也可以根据媒体查询适当调整字体大小 */ text-align: center; position: relative; } ...html {font-size: 100px;} } 以上参考代码的意思是： 根据CSS的媒体查询设备的屏幕的宽度，根据宽度的大小设置密集的html根元素的字体大小。...3.2 js实现动态改变根元素的字体大小 通过js动态获取屏幕的宽度（document.clientWidth）然后根据屏幕宽度动态计算出rem的实际值。...比如： 头像在不同设备上一般都会设置固定像素的大小 宽度可能超过50%的盒子尽量用百分比或者弹性盒子布局 高度和宽度需要同时根据屏幕自动缩放的时候，推荐使用rem布局 5.

3.5K100

移动开发-媒体查询布局

Query) 是CSS3新语法 使用@media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面...4️⃣媒体查询+rem实现元素动态大小变化: rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸 媒体查询可以根据不同设备宽度来修改样式 媒体查询+rem 就可以实现不同设备宽度...文件中导入less文件 ---- 1️⃣ rem 适配方案: 让一些不能等比自适应的元素，达到当设备尺寸发生改变时，等比例适配当前设备 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用...字体大小 3️⃣ Flexble.js + rem 方案 : 不需要再写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，在不同设备下，比例还是一致的 我们要做的，就是确定好当前设备的...html文字大小就可以 比如当前设计稿是750px，那只需把html文字大小设置为 75px(750px / 10) 里面页面元素rem值：页面元素的px 值 / 75 剩余的，让flexible.js

1.3K30

rem适配布局

使用 @media查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中 ,页面也会根据浏览器的宽度和高度重新渲染页面...页面元素可以设置不同大小尺寸， 媒体查询可以根据不同设备宽度来修改样式 媒体查询+ rem就可以实现不同设备宽度,实现页面元素大小的动态变化 2.4引入资源(理解) 当样式比较繁多的时候,我们可以针对不同的媒体使用不同...2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。...为单位的值; 4.2 rem适配方案技术使用(市场主流) 技术方案1 rem 媒体查询 less 技术方案2 (推荐) flexible.js rem rem实际开发适配方案...我们要做的,就是确定好我们当前设备的html文字大小就可以了 比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/ 10)就可以 里面页面元素rem值:页面元素的px

1.9K30

移动端页面的自适应rem

比如320px的10%是32px，640px的10%是64px， 如果10个10%宽度的元素放在一起，那肯定就是100%，即挤满屏幕（宽度），不会超出，也不会留白。...rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下 emem作为font-size的单位时，其代表父元素的字体大小...；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN rem取值分为两种情况，设置在根元素时和非根元素时，举个例子 /* 作用于根元素，相对于原始大小（16px），所以html的font-size...32px}p {width: 2rem} /*64px*/ 如何让html字体大小一直等于屏幕宽度的百分之一呢？...公式是元素宽度 / UE图宽度 * 100，让我们举个例子，假设UE图尺寸是640px，UE图中的一个元素宽度是100px，根据公式100/640*100 = 15.625 rem是弹性布局的一种实现方式

2.3K20

移动适配-rem

rem 认识 优点： 可以适应不同大小的屏幕 使用px或者百分比布局不能实现： px单位时绝对单位 百分比布局是宽度自适应，高度固定的 rem使用 rem使用时需要配合: 媒体查询 flexible.js...(推荐使用⭐) rem 单位 相对单位 相对于HTML标签的字号计算结果 1 rem = 1 HTML字号大小 媒体查询 作用 能够检测视口宽度，根据不同的视口宽度设置不同的html字号大小 HTML...字号取值 不同的视口宽度，设置不同的HTML字体大小，取值为视口宽度的1/10 语法 @media (媒体特性) { 选择器 { css属性； } } 例如： @...: skyblue; } } rem单位尺寸 确定设计稿对应的HTML标签字号 查看设计稿宽度 确定参考设备宽度（视口宽度）一般参考375px...确定基准根字号（1/10视口宽度） rem单位 = px数值/基准根字号值 ，取小数点后4位 flexible 动态的检测手机大小，给网页中html根节点设置不同的font-size。

1.4K10

论CSS中可使用的font-size的长度单位

本文里， 你可以学习到不同的长度单位，以及它们是如何影响其元素中的字体大小的。 像素单位(px) 像素是固定的长度单位。它们是根据用户屏幕上的每一个点的尺寸确定的。...它们常用在自适应网站设计中与根据不同的页面宽度断点设置不同的字体大小。...这样就让页面其他的字体大小计算相对容易。例如，你可以调整一个元素的 font-size为3rem，使其值为30px，或者4.2rem也就是42px，等等。...它们使你可以根据视窗的尺寸大小控制字体的 font-size。如果使用得当，它们还可以避免通过不同断点设置字体大小的实现代码。这是因为这些单位值会随着视窗的高度、宽度做连续性的变化。...使用关键字来设置字体大小 另一个选择是使用关键字设置 font-size。有两种类型的关键字：绝对和相对的。绝对值关键字常用在指定字体大小，其值是根据不同的用户浏览器计算出的一个数据表里的某项。

2.3K20

前端移动web-day03学习笔记

:参考的是元素自身字体大小 (不统一，页面的元素字体大小不一定都是一致的) 3.rem使用流程 (1)设置HTML字体大小一般为 屏幕宽度 1/10...* 一般使用js来实现（后期会学习js） * 导入rem.js (2)设置cssrem插件的参考值为 当前设计稿的rem (...也有的公司会设置1rem = 1/20屏幕宽度 也有的公司会设置1rem = 1/100 屏幕宽度 这个rem的值无论是多少，都不影响它本身的作用：同时适配宽度和高度。...屏幕宽度 也就是说，通过动态设置html字体大小，实现 1rem = 1/10 屏幕宽度 c.动态设置html字体大小为手机当前屏幕 1/10的两种方式 1.使用js代码（推荐...） 2.使用css媒体查询 由于实际开发中一般使用js代码来动态设置html字体大小，实现1rem = 1/10 屏幕宽度， 由于暂时未接触js语言，所以这里老师提前写好一个js文件，我们开发时只需要导入即可

56000

移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo

或许,一万个用户,也难得有几个会去调整浏览器的默认字体大小.白瞎了我的一番苦心. 那么,为什么我不去百分百还原设计稿呢? 我要解决这个问题....看过一些使用媒体查询的案例,首先,它不能无缝切换,而只能根据不同的手机尺寸来进行适配调整.而且,难保不会出现问题.虽然大部分的浏览器都是会进行缩放的.但是不排除某些页面嵌套到APP里面,没有进行缩放处理...放弃了媒体查询.我将目光转向了JS,虽然我一直不喜欢在这种展现层去使用JS,因为我不希望因为JS进行DOM操作大幅的降低网页的性能.但是,我用JS来设置一些html的font-size好像不会损失太多的性能...,因为chorme浏览器的最小像素为6px这就会给我们造成麻烦.因此,如果是这样,我建议比率可以设置为100,也就是如下: 320/720*100 = 44.44444 REM值的确定 因为我的项目之前是确定好了的....如,我需要写一个12px的文字,我就会写1.2rem,计算是很清晰的.基本上不需要费脑子计算.但如果,我们是基于上面的720的设计稿宽度,比率为100,那么显然,全站的rem值必须要进行一个调整.

99110

解决因为手机设置字体大小导致h5页面在webview中变形的BUG

我们采用了rem单位进行布局，通过JS来动态计算网页的视窗宽度，动态设置html的font-size，一切都比较完美。...问题描述清楚了，出现这个问题，有以下因素 你的页面采用了rem单位，并且是采用js动态计算html的font-size 你的页面被加在了APP中的webview中 这该死的手机被重设了字体大小 解决方法...经过测试，确定，这个设置是能够完美解决问题的。 所以，如果你现在看到这篇文章，尝试用我的代码来解决问题，更好的做法，是去找安卓客户端开发工程师，让他增加这样一个参数。...如果不方便，再来用我的JS代码解决。 PS:留言中有人说我的代码不能解决问题。我的代码肯定是能够解决问题的。但是需要根据你的项目自己去调整算法。...我的默认设置是给 html 设置字体大小为 100px

5.8K71

java移动端开发_移动端开发

我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...好在HTML给我们提供了一个关键字device-width ，该关键是读取当前移动设备的宽度。 因此，我们只需要使用下面的代码，即可让所有移动设备的视口宽度和其自身的宽度相等。...比如，设计稿中某个元素的宽度为100像素，那么应该设置它的宽度为 1rem ，这样一来，当视口尺寸等于设计稿尺寸1080时，根元素的字体大小为(1080/1080)*100 = 100px ，它的宽度...为 1rem = 100px ；如果视口尺寸变小了，比如变成了375，那么根元素的字体大小为(375/1080)*100 = 34.72px ，那么它的宽度为 1rem = 34.72px 。...这样就完美的和设计稿比例一致了。 注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？

4.9K20

前端面试宝典（四）

3）重绘和重排是什么？怎样减少重排？ 重绘 当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。...PX特点 IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE...区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。...对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

70520

rem+css预处理+媒体查询与rem+flexible.js做网页适配

流式布局和flex布局主要争对宽度布局，那高度如何设置？ 怎样让屏幕发生变化时候元素高宽等比例缩放？ rem是什么？l rem是一种新的单位，是一个相对单位，类似于em。...的大小 案例 如果设计稿是750px 2.假如我们把整个屏幕划分为15等份（10/20都可以） 3.那么每一份的大小作为html的字体大小如这里就是50px 4.那么在320px设备的时候，字体大小为320...(这里的标准是指以哪个尺寸的设计稿算出来的font-size值) rem配合 flexible.js 使用第一种方式有点麻烦 如下代码 很多媒体查询 /* 设置常见屏幕尺寸，修改html文字大小*/ /...github 它是手机淘宝团队出的简洁高效移动端适配库 我们不需要在写不同屏幕的媒体查询，因为js做了相关处理 它的原理是把当前设备划分为10等份，但是在不同设备下比例一致 我们要做的就是确定好我们当前设备的...大小 图片 最后将vscode重启即可 到这里还没有完，我们要在css定义一个最大的宽度，当屏幕宽度超过设计稿时，就使用设计稿的宽度 如下 @media screen and (min-width:

2K20

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

我们要做的,就是确定好我们当前设备的html文字大小就可以了 比如当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/ 10)就可以 里面页面元素rem值:页面元素的...px值/ 75 剩余的,让flexible.js来去算 页面元素大小取值方法 ①最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)) ②屏幕宽度/划分的份数就是html...的 font-size的大小 ③或者:页面元素的rem值=页面元素值(px) / html font-size字体大小 三、使用步骤 技术选型案例 方案:我们采取单独制作移动页面方案· 技术:布局采取...cssroot为64 5.辅助工具 VSCode px转rem插件 cssrem; image.png 作用：编写代码时自动根据写的px单位计算出等于多少rem 注意： cssrem默认的html...字体大小cssroot为16px ，因此要修改为此时的75px； 修改方法:在vscode设置中查找cssroot，设置为75，设置完成后重新启动vscode就可以了； 具体可以查看此插件VSCode

1.2K50

css篇-面试题7-说一说rem与em的区别并如何做移动端适配

说一下rem 与 em 有什么区别 rem 是基于 html 元素的字体大小来决定，而 em 则根据使用它的元素的大小决定,一般被称为相对长度单位,是根据它父元素的字体大小来计算的，一般默认情况下：16px...当所有单位都采用em时，我们只需要改变body的font-size，那么其他子元素宽度就能动态变化了，显然方便很多 em 和 rem 单位之间的区别是浏览器根据谁来转化成 px 值 rem是css3新增的一个相对长度单位...，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。...有了rem这个单位，我们只需要调整根元素html的font-size就能达到所有元素的动态适配了 移动端-以一个固定尺寸(750px)为标准-将 px 转化为 rem (function(win, lib...将这段js代码命名为一个mobile-adaption.js引入到页面中,就可以愉快的使用了,将px转化为rem,实现自适应布局 在不同的设备当中保持一致 每个公司都有自己的一套标准,有的也用手淘那一方案

1.2K50

rem适配移动端的原理及应用场景

最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。...*/ 我们用js很容易动态的设置html的font-size恒等屏幕的1/10;我们可以在页面dom ready、resize和屏幕旋转中设置： document.documentElement.style.fontSize...字体并不合适使用rem, 字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小...五、rem布局方案 从上可以看出最好的弹性布局方案就是rem+js的方案，《Flexible实现手淘H5页面的终端适配》就是采用rem+js实现的。flexible主要做了几点。...根据上面说，vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100；感觉已经不用多说了。

1.5K20

Rem布局的原理解析

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 我在面试时经常问会一道和em有关的题，来看一下面试者对css细节的了解程度，如下，问s1...和1x就等价了 html {fons-size: width / 100} p {width: 50rem} /* 50rem = 50x = 屏幕宽度的50% */ 如何让html字体大小一直等于屏幕宽度的百分之一呢...公式是元素宽度 / UE图宽度 * 100，让我们举个例子，假设UE图尺寸是640px，UE图中的一个元素宽度是100px，根据公式100/640*100 = 15.625 p {width: 15.625rem...320/100=3.2px 15.625*3.2=50px 可以发现，UE图宽度和屏幕宽度相同时，两边得出的元素宽度是一致的 上面的计算过程有些繁琐，可以通过预处理的function来简化过程，下面是...： 首先是字体的问题，字体大小并不能使用rem，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小

1.1K20

浅谈Web自适应

这种解决方案相对前一种来说进步不少，不仅仅宽度实现了自适应，而且界面所有的元素大小和高度都会根据不同分辨率和屏幕宽度的设备来调整元素、字体、图片、高度等属性的值。...简单来说就是在不同的屏幕下，你看到的字体和元素高宽度的大小是不一样的。在这里，有人就会说利用的是媒体查询熟悉，根据不同的屏幕宽度，调整样式。...实际上在这里，我们采用的是js和css熟悉rem来解决这个问题的。 REM属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。...所以，这时div的高度就是20px，宽度是30px，边框是1px，字体大小则是10px；一旦有了这样的方法，我们自然可以根据不同的屏幕宽度设置不同的根节点字体大小。...值，得到如下结果: 接下来我们可以根据根元素的字体大小用rem设置各种属性的相对值。

1.5K80
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券