[html] 移动端布局的自适应如何做？

移动端的布局，如果是采用框架的话，小程序和uni-app等都有响应式单位rpx来做自适应。
如果单纯的用Vue或React的话，一般来说就是flex配合rem或者vw布局来实现自适应。
rem布局的原理是根据rem是相对于根字体大小而改变的， 例如设计稿是750px大小的，可以设置一个转换比例来做适配：const width = document.document.documentElement.clientWidth // 获取当前屏幕的宽度，例如苹果6是375
const designWidth = 750 // 设计稿的宽度
// 下面计算比例，我们以1:100来计算（因为整除100好算，当然可以通过vscode插件）：
const ratio = 375 / 750 * 100 // 就用这个来设置为根字体大小
document.querySelector('html').style.fontSize = ratio + 'px'
document.querySelector('body').style.fontSize = '16px'  // 因为设置了跟字体大小，会影响到其他的样式，所以要通过body还原
这样假如设计稿的一个`div`是100px，我们可以处以比例（100），即`1rem`。
div { width: 1rem; } // 所以在375px里面就是50px的宽度。vw的话，是100vw即可以铺满整个屏幕，这个相对于rem更加简单，只是可能兼容性不如rem布局，实现：// 假设设计稿是750px
const ratio = 750/100 = 7.5;  // 除以100是因为屏幕宽度恒定为100vw
//假设一个`div`是`375px`大小
div { width: 3.75vw; }  // 3.75vw在375px的屏幕下就是一般，即187.5px

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[html] 移动端布局的自适应如何做？相关推荐

移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
移动端宽高自适应布局解决办法
移动端布局总会出现宽高在不同移动终端显示不一致的问题,具体是由于各终端设备的宽高不一致引起的.通常情况下我们会通过用js来根据不同宽度实现自适应,那么高度如何自适应呢? 以上分别是做了宽度自适应的在 ...
php网站怎么做自适应,什么是自适应布局？自适应布局如何实现？
在前端布局中有一种布局叫自适应布局,那么,自适应布局是什么意思呢?自适应布局又如何实现?本篇文章将给大家来介绍自适应布局的意思以及自适应布局的实现方法. 首先我们来看什么是自适应布局? 所谓自适应布局 ...
html手机端适配怎么调试,html5面试常见问题及答案：移动端布局与适配篇
原标题:html5面试常见问题及答案:移动端布局与适配篇 1. 移动布局自适应不同屏幕的几种方式 (1)响应式布局 (2)100%布局(弹性布局) (3)等比缩放布局(rem) 2. iscroll安 ...
【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍布局:layout 对事物的全面规划和安排页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
html+css移动端布局
文章目录移动端一.移动端基础 **1 .浏览器现状** **2 .手机屏幕现状** **3.常见移动端屏幕尺寸** **4.移动端调试方法** 5.总结二.视口 **1.布局视口** `layo ...
CSS - 移动端布局（二）移动端适配
目录通过上一节的学习移动端网页的布局固定尺寸布局百分比布局 rem布局 vw布局仿京东移动端首页开发实例(rem布局.vw布局) 通过上一节的学习 CSS - 移动端布局(一)关键的前置知识 ...
前端布局之移动端布局相关
一.移动端布局 1.布局概念 (1)静态布局直接使用px作为单位不推荐不能适应屏幕 (2)流式布局宽度使用百分比高度使用px 通常还会加上最大值和最小值 (3)自适应布局创建多个静态布局, ...
bootstrap怎么在移动端横向布局_前端知道分享，移动端布局
一.下面我将简单的介绍移动端布局的八种方式: 1.固定布局 2.流动布局 3.浮动布局 4.定位布局 5.混合布局 6.flex布局 7.rem布局 8.响应式布局 9.**圣杯布局10.**双飞翼 ...

[html] 移动端布局的自适应如何做？

[html] 移动端布局的自适应如何做？

个人简介

主目录

[html] 移动端布局的自适应如何做？相关推荐

最新文章

热门文章