如何写移动端自适应？

最新推荐文章于 2024-04-29 11:17:53 发布
最新推荐文章于 2024-04-29 11:17:53 发布
阅读量193 收藏
点赞数
分类专栏： 移动端设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinfeiyanwu1/article/details/88661626
版权

1、使用rem单位去替换px单位，布局模板以宽为320px移动端来布局；

2、因为rem单位是以html根元素的font-size为标准换算的，所以，随着屏幕的尺寸越大，而font-size始终为320px时所定的像素（这里采用html的font-size为20px方便计算），且移动端尺寸变大html的font-size不会跟着变大，所以，我们所计算出来的元素尺寸是不会跟着变化的，这时，我们需要去检测设备根据设备的尺寸去重设html的font-size的以适应其他移动端的尺寸。。。

这时我这段时间做项目得到的结论。。。。。。。

 

xinfeiyanwu1
关注
专栏目录
详解基于vue-cli配置移动端自适应
08-28
详解基于vue-cli配置移动端自适应 本文主要介绍了基于vue-cli配置移动端自适应的方法，主要涉及到三个方面：lib-flexible库的安装和使用、px到rem的转换、vue-cli配置的修改。 首先，在项目中安装lib-flexible库，...
PC、移动端自适应等比缩放布局方案
11-16
### PC、移动端自适应等比缩放布局方案 随着互联网技术的发展与用户需求的变化，前端开发中的布局方式也在不断地演变。从最开始的静态布局到流式布局、自适应布局、响应式布局以及弹性布局，每种布局都有其独特的...
自适应的写法之一
WX4059392的博客
12-01 332
首先设置body内字体大小为：font-size:0.6rem; 然后写一个js，内容如下，在样式中控制大小均为rem即可： !function(e,t){function i(){var t=n.getBoundingClientRect().width;t/m>640&&(t=640m);var i=t/16;n.style.fontSize=i+“px”,d.rem=e...
移动端如何编写
weixin_47031868的博客
02-27 556
一般来说，移动端都是头部固定，底部固定 那么可以用flex布局 html,body{height: 100%;} 整个盒子外部，或者body body{display: flex;flex-direction: column;} 然后头部跟底部写好高度 中间部分 flex:1 overflow-y:auto reset.css body,ul,li,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,form,img,table,fieldset,legend{margin:0; padding
移动端写法
qq_38674970的博客
04-03 293
html{    font-size:12px;}.top { width: 100%; height: 10rem; color:#ff7600; background-color: #ff7600;}.top .top-left { line-height: 10rem; color:#fff; font-size: 4rem; text-align: center;}.top .top-ce...
自适应写法
weixin42708182的博客
04-24 299
首先设置body内字体大小为：font-size:0.6rem; 然后写一个js，内容如下，在样式中控制大小均为rem即可： !function(e,t){function i(){var t=n.getBoundingClientRect().width;t/m>640&&(t=640m);var i=t/16;n.style.fontSize=i+“px”,d.rem=e...
移动端开发的时候，一般怎么实现自适应？
weixin_39407291的博客
11-04 602
rem vw和vh 媒体查询（bootstrap）； 进阶一：他们的特点分别是什么？或者说实现原理是什么？ rem 根据 html 的 font-size； vw是浏览器窗口宽度，vh是高度； 媒体查询是根据浏览器窗口宽度或高度，进行响应式选择显示哪个css； 进阶二：弹出输入框会发生定位错误，fixed布局，怎么解决？ ...
移动端自适应flexible
07-07
移动端自适应插件，css可直接写px 会自动计算自适应不同分辨率下布局
PC端和移动端自适应问题的快速解决方法
09-24
总结来说，解决PC端和移动端自适应问题需要对不同分辨率进行考量，并通过媒体查询、相对单位、弹性布局等技术手段来实现网页的响应式设计。对于老版本浏览器的兼容处理，需要借助JavaScript来辅助实现布局的调整。...
html5移动端自适应布局的实现
11-21
HTML5移动端自适应布局是现代Web开发中的关键技术，它使得网页可以无缝适应不同尺寸的设备，无论是手机、平板还是桌面电脑。以下是两种常见的自适应布局实现方式的详细解释： 1. **媒体查询（Media Queries）** ...
移动端是怎么做适配的
weixin_43294966的博客
12-27 1952
1、设置理想窗口meta viewport 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。 一般我们在编辑器里输入meta:vp按下tab就可以自动补全这些 width=device-width这句代码可以把布局视口设置成为浏览器（屏幕）的宽度。 initi...
移动端适配怎么写？
LY_code的博客
10-17 855
1. 适配函数怎么写？ 移动端的适配JS代码适配函数，放在main.js或主入口文件中： function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', r...
移动端自适应方案
CamilleZJ的博客
11-18 608
常见的flexible.js，如下 一、flexible.js 的使用方式： github地址：https://github.com/amfe/lib-flexible 官方文档地址：https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档。 (一)、引用方式 1，引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flex
移动端如何编写自适应网页
weixin_30883271的博客
07-16 143
一、html页面中head部分引入<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1"> content属性值 : width:可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示是可视区域的缩放级别，取值...
写移动端案例
baidu_41846158的博客
03-26 255
方案：vw+rem 使用vw是为了让元素的大小能受到屏幕大小的变化而控制，让整体使用rem单位，跟随html中font-size的值变化，达到良好的适配效果。 注： vw是视口的占比，如：width：100vw意为宽度为视口的100%;width:50vw意为宽度为视口的50% Rem是相对大小单位，相对于根元素html的font-size大小，默认状态1rem=16px，若设置html{font...
普通的html如何写自适应
热门推荐
有问题可关注公众号：前端研究院 后台输入问题回复
01-17 1万+
首先，引入flexible.js //designWidth:设计稿的实际宽度值，需要根据实际设置 //maxWidth:制作稿的最大宽度值，需要根据实际设置 //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750) ;(function(designWidth, maxWidth) { var do...
写移动端的两种方法
m0_46329256的博客
03-26 452
写移动端的两种方法 第一种:vw+rem法1.计算rem:确定移动端设计图宽度width: 640px 750px 1080pxdpr: 2 2 3代码: width:320px width:375px ...
antd option宽度自适应_编写自适应网页的方法
weixin_39527078的博客
11-29 271
大家好，我是吉礻羊。有人@我说不知道怎么写自适应的网页，今天就先不写优化的了，我把写自适应网页的方法说下。自适应的网页工具：dw网页设计软件；ps图像处理软件。方法/步骤：1，在之间加入加入一行viewport标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，...
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
最新发布
weixin_67244432的博客
04-29 2629
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
pc端和移动端自适应
10-14
PC端和移动端自适应是指网站或应用程序能够根据用户的设备和屏幕大小自动调整展示效果和布局。在现代互联网时代，用户的访问终端多种多样，包括桌面电脑、笔记本电脑、平板电脑和智能手机等。为了让用户在不同设备上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值