电脑网站制作软件,注册网约车主需要什么条件,私人订制app软件,wordpress多重标签目录
一、自适应和响应式
二、为什么要做移动端适配#xff1f;
三、当前流行的几种适配方案
(1) 方案一#xff1a;百分比设置#xff08;不推荐#xff09;
(2) 方案二#xff1a;rem 动态设置 font-size
px 与 rem 的单位换算
手动换算
less/scss函数
webpac…目录
一、自适应和响应式
二、为什么要做移动端适配
三、当前流行的几种适配方案
(1) 方案一百分比设置不推荐
(2) 方案二rem 动态设置 font-size
px 与 rem 的单位换算
手动换算
less/scss函数
webpack工具 - postcss-pxtorem
VSCode插件 - px to rem rpx vw
实现方案一媒体查询
实现方案二编写 js 代码
实现方案三lib-flexible 库 (3) 方案三vw / vh - (viewport width)适配方案
px 与 vw 的单位转换
手动换算
less/scss 函数
webpack工具 - postcss-px-to-viewport-8-plugin
vs Code 插件 - px to rem rpx vw
(3) 方案四Flex布局 一、自适应和响应式
自适应根据不同的设备屏幕大小来自动调整尺寸、大小。 自适应布局是一种根据不同的设备屏幕分辨率进行布局的方式它为不同的屏幕分辨率定义了不同的布局即创建多个静态布局每个静态布局对应一个屏幕分辨率范围。当屏幕分辨率发生变化时页面中元素的位置会变化而大小不会变从而保持在不同渲染设备下浏览效果的最优化给用户一致的浏览体验。然而自适应布局的劣势在于为了适应不同的设备同一个页面往往需要开发不同页面会增加成本尤其当页面需求发生变化时会涉及多套代码的改动。 自适应布局的实现通常通过使用媒体查询(Media Queries)技术根据屏幕宽度等条件应用不同的CSS样式规则。例如可以通过设置不同的背景颜色来区分屏幕宽度实现自适应布局的应用方式案例。此外自适应布局的特点还包括使用百分比、auto等尺寸值以便元素尺寸能够相对父对象或自动计算从而实现与浏览器尺寸的关联达到自适应的效果。 综上所述自适应布局是一种根据设备屏幕分辨率调整页面布局的技术通过定义多个静态布局来适应不同的屏幕分辨率范围同时利用媒体查询和适当的尺寸值来实现布局的自适应性。 响应式会随着屏幕的实时变动而自动调整是一种更强的自适应。响应式布局也会用到媒体查询自适应布局是在不同的屏幕下看到的页面布局是一样的如果屏幕太小的话即使对小屏幕进行适配会发现页面还是过于拥挤而响应式正式为了解决这个问题它可以识别屏幕大小还是根据屏幕大小调整页面的布局。 参考一文了解前端网页布局常用的几种方式_前端布局的几种方式-CSDN博客 参考最全的前端项目中自适应布局和响应式布局解决方案-CSDN博客 二、为什么要做移动端适配
目前市面上移动端屏幕尺寸非常的繁多很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图 当我们针对一个手机进行布局设计时设置了一个 200 * 200 大小的盒子但在不同的设备上由于逻辑像素不同的问题会使得这个盒子在更大的视口上显得很小在更小的视口上显示很大因此我们需要进行适配让它在不同设备上所占据视口的空间比例是相同的 三、当前流行的几种适配方案 方案一百分比设置不推荐 因为不同属性的百分比值相对的可能是不同参照物所以百分比往往很难统一所以百分比在移动端适配中使用是非常少的 方案二rem单位动态html的font-size 方案三vw单位推荐 方案四flex的弹性布局
(1) 方案一百分比设置不推荐 百分比布局 也叫流式布局这是一种比较老的解决方案现在基本上都是作为辅助在使用。通过使用百分比来定义元素的宽度可以实现元素的宽度自适应而高度固定的效果适用于需要宽度自适应的场景。 使用百分比布局实现移动端的自适应布局可以让页面元素随设备屏幕的大小自动适应缩放从而实现不同设备的自适应。下面是具体的实现步骤
① 在CSS中使用百分比作为元素的宽高、边距等属性值。
例如如果设计稿中某个元素的宽度为375px那么在样式中应该设置其宽度为100%相对于父元素再设置padding、margin等。 .example {width: 100%; /* 相对于父元素 */padding: 10% 5%; /* 相对于元素宽度 */margin: 5% auto; /* 相对于元素宽度 */box-sizing: border-box; /* 让padding不影响元素实际宽度 */
}② 在HTML中设置viewport的宽度为设备宽度并设置initial-scale为1表示不缩放。这样元素的宽度就会根据设备宽度自动缩放。 headmeta nameviewport contentwidthdevice-width, initial-scale1.0
/head③ 在响应式设计中可以使用媒体查询来针对不同的设备尺寸设置不同的样式。例如当设备宽度小于等于768px时设置某个元素的宽度为80%。 media (max-width: 768px) {.example {width: 80%; /* 相对于父元素 */}
}通过以上步骤就可以使用百分比布局实现移动端的自适应布局了。不同设备的屏幕大小页面元素都会自动缩放保证在任何设备上都能有良好的显示效果。同时可以通过媒体查询针对不同设备尺寸设置不同的样式进一步优化移动端的显示效果。
(2) 方案二rem 动态设置 font-size
rem是目前多数企业在用的解决方案屏幕宽度不同网页元素尺寸不同等比缩放效果。
rem 单位是相对于 html 元素的 font-size 来设置的通过在不同屏幕尺寸下动态的修改 html 元素的 font-size 以此来达到适配效果。
在开发中我们只需要考虑两个问题
针对不同的屏幕设置 html 不同的 font-size将原来设置的尺寸转化成 rem 单位
font-size 的尺寸
屏幕尺寸html的font-size盒子的设置宽度盒子的最终宽度375px37.5px1rem37.5px320px32px1rem32px414px41.4px1rem41.4px
px 与 rem 的单位换算
手动换算
根元素 html 的文字大小 视口宽度/分成的份数(一般为10份方便计算)rem 值 元素的 px 值 / 根元素 html 的文字大小比如有一个在375px屏幕上100px宽度和高度的盒子我们需要将100px转成对应的rem值100/37.52.6667其他也是相同的方法计算即可 目前rem布局方案中将网页等分成10份 HTML标签的字号为视口宽度的 1/10 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号1/10视口宽度 以设计稿为375px为例1rem 1html字号大小(基准根字号)37.5px 手机屏幕大小不同 如何设置不同的HTML标签字号例如使用媒体查询能够检测视口的宽度然后编写差异化的 CSS 样式。 rem单位小结rem单位是一种相对单位相对于HTML标签的字号计算结果1rem等于HTML标签的字号大小。这种布局方案中将网页等分成若干份HTML标签的字号设置为视口宽度的某一比例如以设计稿宽度为例1rem等于视口宽度的1/10。通过使用媒体查询检测视口的宽度可以编写差异化的CSS样式实现不同屏幕尺寸下的适配。
less/scss函数 .pxToRem(px) {result: 1rem * (px / 37.5);
}
.box {width: .pxToRem(100)[result];height: .pxToRem(100)[result];background-color: orange;
}
p {font-size: .pxToRem(14)[result];
}
webpack工具 - postcss-pxtorem
目前在前端的工程化开发中我们可以借助于webpack的工具来完成自动的转化npm install postcss-pxtorem VSCode插件 - px to rem rpx vw
一个 px 与 rem 单位互转的 VSCode 插件且支持WXSS微信小程序。
特性 支持智能感知 px - rem (快捷键Alt z) rem - px (快捷键Alt z) px - vw (快捷键Alt v, Alt w) vw - px (快捷键Alt v, Alt w) px - rpx (微信小程序, 快捷键Alt r) rpx - px (微信小程序, 快捷键Alt r) 支持鼠标悬停显示转化过程 支持直接打上标记 支持选中区域 可以利用VSCODE的Keyboard shortcuts重新定义快捷键。 如何使用 在文件内自动转换例如录入 12px 智能提醒对应转化后 rem 值 光标至 14px 上按下 Alt z 对应转化 rem 通过 F1 面板查找cssrem
支持语言
html vue css less scss sass stylus tpl(php smarty3) tsx jsx
配置
根目录的 .cssrem 文件优先级最高其格式如下 {rootFontSize: 18,fixedDigits: 3
} 其次也可以配置全局点击 VS Code 的 文件 首选项 设置打开设置面板
名称描述默认值cssrem.rootFontSize基准font-size单位px16cssrem.fixedDigits保留小数点最大长度4cssrem.autoRemovePrefixZero自动移除0开头的前缀truecssrem.ingoresViaCommand当使用命令行批量转换时允许忽略部分 px 值不转换成 rem单位string[]例如[ 1px, 0.5px ][]cssrem.addMark是否启用加上标记falsecssrem.hover是否启用悬停时显示转换数据, disabled: Disabled, always Anything, onlyMark: Only valid when cssrem.addMark is trueonlyMarkcssrem.currentLine是否当前行尾显示标记disabled: Disabled, show Showshowcssrem.ingores忽略文件清单例如[ demo.less, src ]string[]cssrem.languages支持语言清单 [ html, vue, css, postcss, less, scss, sass, stylus, tpl, wxss, twig, javascriptreact, typescriptreact, javascript, typescript ]默认全部包含string[]cssrem.remHover是否启用 rem 悬停truecssrem.vw是否启用vw支持falsecssrem.vwHover是否启用 vw 悬停truecssrem.vwDesign规定设计稿宽度一般等同于浏览器视口宽度750cssrem.wxssWXSS小程序样式 是否启用WXSS支持falsecssrem.wxssScreenWidthWXSS小程序样式 规定屏幕宽度默认 750尺寸单位750cssrem.wxssDeviceWidthWXSS小程序样式 设备分辨率宽度官方推荐使用 iPhone6 作为视觉稿的标准375
VSCode插件 - cssrem插件信息截图如下
实现方案一媒体查询 参考https://blog.csdn.net/sunyctf/article/details/142652838 思路通过媒体查询来设置不同尺寸屏幕下 html 的 font-size
缺点
需要针对不同的屏幕编写大量的媒体查询如果动态改变尺寸不会实时更新只是一个个区间 !DOCTYPE html
html langen
headmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlerem适配/titlestyle/* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */media screen and (min-width: 320px) {html {font-size: 20px;}}media screen and (min-width:375px) {html {font-size: 24px;}}media screen and (min-width: 414px) {html {font-size: 28px;}}media screen and (min-width: 480px) {html {font-size: 32px;}}/* 2. 书写盒子尺寸, 单位rem */.box {width: 5rem;height: 5rem;background-color: blue;}/style
/head
bodydiv classbox/div
/body
/head
/html 番外在HTML中设置viewport的宽度为设备宽度并设置initial-scale为1表示不缩放。这样页面元素的宽度就会根据设备宽度自动缩放。
实现方案二编写 js 代码
思路通过监听屏幕尺寸的变化来动态修改 html 元素的 font-size 大小
方法
根据 html 的宽度计算出 font-size 的大小并设置到 html 上监听页面尺寸的变化实时修改 font-size 大小 function setRemUnit() {// 获取所有的 html 元素const htmlEl document.documentElement// 375 - 16px// 320px - 12px// 我们需要动态更改字体大小因此需要获取网页的宽度// 拿到客户端宽度const htmlWidth htmlEl.clientWidth// 将宽度分成10份const htmlFontSize htmlWidth / 10console.log(htmlFontSize, htmlFontSize);// 将值给到html的font-sizehtmlEl.style.fontSize htmlFontSize px
}
setRemUnit()
// 给 window 添加监听事件
window.addEventListener(resize, setRemUnit) 实现方案三lib-flexible 库
lib-flexible 是淘宝团队出品的一个移动端自适应解决方案通过动态计算 viewport 设置 font-size 实现不同屏幕宽度下的 UI 自适应缩放。 (function flexible (window, document) {var docEl document.documentElementvar dpr window.devicePixelRatio || 1
// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize (12 * dpr) px}else {document.addEventListener(DOMContentLoaded, setBodyFontSize)}}setBodyFontSize();
// set 1rem viewWidth / 10function setRemUnit () {var rem docEl.clientWidth / 10docEl.style.fontSize rem px}
setRemUnit()
// reset rem unit on page resizewindow.addEventListener(resize, setRemUnit)window.addEventListener(pageshow, function (e) {if (e.persisted) {setRemUnit()}})
// detect 0.5px supportsif (dpr 2) {var fakeBody document.createElement(body)var testElement document.createElement(div)testElement.style.border .5px solid transparentfakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight 1) {docEl.classList.add(hairlines)}docEl.removeChild(fakeBody)}
}(window, document)) 手机设备多屏幕尺寸不一视口不仅仅有几个不可能每次都定义媒体查询。此时可以使用flexible.js这是手机淘宝团队开发出的一个用来适配移动端的js框架核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size值。 他帮我们把媒体查询写好了 并且给html 设置font-size 帮我们把屏幕划分成 10份 然后他把每一份的大小给 html的font-size 设置好了 。使用方法在代码中引入flexible.js文件即可 (3) 方案三vw / vh - (viewport width)适配方案
● vw / vh 是相对单位vw就是视口的宽度 vh就是视口的高度 vw 、 vh 和 百分比的特点(了解) - vw 永远是以视口的宽度/高度为准。如在 375px设计稿下 1vw 永远是 3.75px - vh 永远是以视口的高度为准。如在 667px设计稿下 1vh 永远是 6.67px - 百分比以父盒子为准。 假如父盒子是 200px则 1% 是 2px vwviewport width 1vw 1/100的视口宽度 1vw当前屏幕宽度的1/100即1%。如果正常稿屏幕宽度为375px则1vw 375px*1% 3.75px vhviewport height 1vh 1/100的视口高度 1vh当前屏幕高度的1/100即1%如果正常稿屏幕的高度是667px 则1vh 667px*1% 6.67px ① vw 单位尺寸
- 确定设计稿对应的vw尺寸 1/100视口宽度
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 1/100 视口宽度
- vw单位的尺寸 px单位数值 * ( 1/100 视口宽度 ) 100vw 相当于整个视口的宽度 innerWidth1vw 相当于视口宽度的 1%将 px 转换为 vw 即可完成适配其实上面的 rem 就是模仿 vw 方案。 例如设计图 375px 100vw375px 1vw3.75px 如果测量的盒子大小是75px 那么就是75/3.75 20vw box { width: 75px;height: 75px; }转化写法就是 box { width: 20vw;height: 20vw; } ② vh 单位尺寸
- 确定设计稿对应的vh尺寸1/100视口高度
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 1/100 视口高度
- vh单位的尺寸 px单位数值 * ( 1/100 视口高度 )
● 问开发中vw和vh是否能一起混用?
当然是不可以的。vw和vh不能混用如果混用会导致盒子变形所以我们要么统一使用vw要么统一使用vh。但是高度比宽度要大所以建议使用vw。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge!-- 在HTML中设置viewport的宽度为设备宽度并设置initial-scale为1表示不缩放。这样元素的宽度就会根据设备宽度自动缩放 --meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box1 {width: 10vw;height: 10vw;background-color: #ccc;margin: 5vw auto;}.box2 {width: 10vh;height: 10vh;background-color: pink;margin: 5vh auto;}/style
/head
bodydiv classbox1/divdiv classbox2/div/body
/html vw适配效果如下
vh适配效果如下
番外在HTML中设置viewport的宽度为设备宽度并设置initial-scale为1表示不缩放。这样元素的宽度就会根据设备宽度自动缩放。 小结vw和vh不能混用的原因是会导致盒子变形。 vw和vh是CSS中的视窗单位分别代表视口的宽度和高度。由于vw和vh分别基于视口的宽度和高度如果混用当视口尺寸变化时盒子的宽高比会发生变化从而导致盒子变形。 具体来说vw和vh单位是相对于视口大小的这意味着它们会随着视口大小的改变而改变。如果同时使用vw和vh来设置盒子的宽度和高度当视口尺寸变化时盒子的宽高比会发生变化可能导致盒子的形状扭曲。因此为了保证布局的稳定性和一致性建议要么统一使用vw要么统一使用vh。 此外混用vw和vh还可能导致兼容性问题。虽然现代浏览器普遍支持vw和vh单位但在一些旧版本的浏览器中可能不支持或支持不完全这会增加开发和维护的难度。因此为了避免这些问题推荐在设置盒子的宽度和高度时保持一致性使用单一的vw或vh单位。 vw相比于rem的优势
不需要去计算 html 的 font-size 大小也不需要去给 html 设置 font-size不会因为设置 html 的 font-size 大小而必须再给 body 设置一个 font-size 防止继承因为不依赖 font-size 的尺寸所以不用担心某些原因的 html 的 font-size 尺寸被篡改导致页面尺寸混乱vw 更加语义话1vw 相当于 1/100 viewport 的大小rem 事实上作为一种过渡的方案它利用的也是 vw 的思想 rem目前市场比较常见 1. 需要不断修改html文字大小。 2. 需要媒体查询media。3. 需要 flexible.js vw / vh是将来(马上)趋势 省去各种判断和修改目前大厂都在趋向使用。 px 与 vw 的单位转换
手动换算
示例以普通稿375px*667px为例
公式vw测量宽度 / 标准稿(375 * 1% 3.75px) vh测量宽度 / 标准稿(667 * 1% 6.67px)
示例若需要转换的测量宽width高hight都为100px。则转换过后的vw值(100 / 3.75); vh值(100 / 6.67);
less/scss 函数 vwUnit: 3.75;
.pxToVw(px) {result: (px / vw) * 1vw
}
.box {width: .pxToVw(100)[result];height: .pxToVw(100)[result];
} webpack工具 - postcss-px-to-viewport-8-plugin
和rem一样在前端的工程化开发中我们可以借助于webpack的工具来完成自动的转化npm install postcss-px-to-viewport-8-plugin
vs Code 插件 - px to rem rpx vw
px to vw 插件在编写时自动转化
(3) 方案四Flex布局
Flex布局 / 弹性布局是一种浏览器提倡的布局模型 布局网页更简单、灵活 避免浮动脱标的问题目前比较流行的一种方式。
基于 Flex 精确灵活控制块级盒子的布局方式Flex布局非常适合结构化布局。
使用父元素添加 display: flex子元素可以自动的挤压或拉伸。 Flex布局是一种更现代且灵活的布局方式它允许更精确地控制块级盒子的布局避免了浮动脱标的问题。Flex布局非常适合结构化布局通过设置 display: flex 在父元素上子元素可以自动地挤压或拉伸实现元素的灵活排列和对齐。 主轴的对齐方式 修改主轴对齐方式属性: justify-content属性值
侧轴的对齐方式 使用align-items调节元素在侧轴的对齐方式
改变主轴(X轴)对齐的方向变成侧轴(Y轴)方向
主轴默认是水平方向侧轴默认是垂直方向可以使用flex-direction属性改变元素排列方向
弹性盒子换行使用flex-wrap: wrap; 实现弹性盒子多行排列效果
调整换行后的对齐方式 使用align-content 属性属性值和justify-content的一样。
参考CSS align-content 属性
align-content 定义和用法 align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项垂直。提示使用 justify-content 属性对齐主轴上的各项水平。注意容器内必须有多行的项目该属性才能渲染出效果。 align-content和align-item的区别
align-content 适用于多行align-item 则是适用于单行。 align-content单行无效可以设置上对齐、下对齐、居中、拉伸、平分剩余空间align-item上对齐、下对齐、居中、拉伸。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.demo {display: flex;flex-wrap: wrap;width: 500px;height: 500px;background-color: aqua;justify-content: space-around;align-content: space-between;}.demo span {width: 200px;height: 100px;background-color: brown;margin: 15px;}/style/headbodydiv classdemospan1/spanspan2/spanspan3/span span4/spanspan5/spanspan6/span/div/body
/html
显示结果如下图 总结移动端适配方案主要包括百分比布局、Flex布局、rem单位、vw/vh等几种解决方案。
此外移动端适配还需要考虑不同屏幕大小、像素密度等因素。对齐模式和尺寸适应是移动端适配的两个关键要素其中对齐模式涉及元素与父级图层的对齐关系而尺寸适应则是元素对上级或下级元素尺寸变化的响应逻辑。像素密度也是一个重要的考虑因素不同设备的像素密度差异很大需要在设计和开发过程中加以考虑以确保跨设备的良好用户体验。 参考资料
—— Vue移动端项目适配方案总结 _烤地瓜的CSDN博客 —— | 移动端适配如何处理
移动端的适配该如何实现_CSDN博客 | 【面试】移动端自适应布局如何实现-CSDN博客
—— H5实现移动端自适应的几种方法 | 一文了解前端网页布局常用的几种方式 ——
VW、VH适配移动端的解决方案与常见问题 _ 脚本之家
最全的前端项目中自适应布局和响应式布局解决方案-CSDN博客