移动开发两种适配方法

最新推荐文章于 2024-02-25 22:13:44 发布
最新推荐文章于 2024-02-25 22:13:44 发布
阅读量189 收藏
点赞数
分类专栏： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45511236/article/details/109402466
版权

less html 前端

定值

编写时直接使用 rem 单位进行布局

  1. 完美视口设置
  2. 总宽 375 布局
  3. 以 font-size 100px 进行尺寸换算，设置 rem
  4. 增加 JS 代码进行页面适配
<html lang="en" style="font-size: 100px;">

在这里插入图片描述

定比例

选择一个设计稿宽度的比例尺寸作为根元素的字体大小

  1. 完美视口设置
  2. 通过 JS 设置页面的根元素字体大小。可以除以 10 也可以除以其他的数字
  3. 根据设计稿使用 rem 设置元素大小

在less文件中
在这里插入图片描述
然后再引入

<link rel="stylesheet" href="./card.css">
美式因子
关注
专栏目录
移动web开发，rem适配方案
10-31
本文将深入探讨移动Web开发中的rem适配方案，包括flexible.js+rem和less+rem+媒体查询两种常见策略。 首先，我们要了解移动端的基础知识。当前，大部分中国市场的手机浏览器内核基于Webkit，如UC、QQ和百度浏览器。...
移动web开发---rem适配案例---优惠券.rar
11-06
在实际项目中，开发者往往结合使用这两种方法，利用CSS的媒体查询设定基础样式，然后用JavaScript处理更复杂的动态适配需求。在优惠券案例中，可能一个方案用于静态布局，另一个用于动态响应。 为了优化性能和减少...
移动开发-屏幕适配
Primise7的博客
07-16 290
视口（viewport）是用来约束网站中最顶级元素html的，即它决定了html的大小。 1、 PC端viewport PC设备上，viewport的大小取决于浏览器窗口的大小，以CSS像素作为度量单位。 获取viewport的大小(即浏览器可视区域)： document.documentElement.clientWidth; document.documentElement.cli...
移动端开发的简单适配方案
土家稀哥
06-07 779
现在是移动端的天下啊，但是在做移动端开发的时候会遇到很多坑，适配是必须要做的，这里总结一下自己平时写移动端页面的两种简单处理办法，希望能够帮到大家： 第一种：利用js来计算不同设备中的文字大小 var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 640) deviceWidth = 640; docu
移动端开发适配方案
qq_56088882的博客
11-25 2363
各种布局都有自己的优缺点，一般情况不会只采取一种方案，一般都采用混合技术开发，选取其中一种技术为主，其他技术为辅。
移动端开发四种适配方案详解
darabiuz的博客
07-30 4620
web移动端开发0.思维导图1.前端开发常用单位2.视口2.1 视口定义2.2 移动端视口宽度9802.3 设置移动端不自动缩放网页尺寸3.移动端常见适配方案1.媒体查询@media2.界面自动跳转 0.思维导图 #mermaid-svg-iQemmYrmjEoq5H0O .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-
面试官：你知道移动端适配吗？
程序员成长指北
02-25 183
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群大家好，我是考拉????。分享一篇移动端适配的多个方案，也可以说说你是怎么做的。正文自适应：根据不同的设备屏幕大小来自动调整尺寸、大小响应式：会随着屏幕的实时变动而自动调整，是一种更强的自适应为什么要做移动端适配？目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小...
rem适配两种方案-实战篇
最新发布
04-13
本文将深入探讨两种基于`rem`的适配方案，并通过实战案例来解析它们的运用。 一、方案一：媒体查询结合动态设置`html`字体大小 1. **基础原理**：利用CSS媒体查询（Media Queries）针对不同屏幕尺寸设置不同的`...
移动布局之rem适配布局、Bootstrap前端开发框架.rar
09-10
在移动设备上构建响应式和适应性强的网页布局是现代前端开发的重要环节。"移动布局之rem适配布局"和"Bootstrap前端开发框架...通过深入理解和实践这两种技术，开发者可以更有效地构建出适应未来多屏时代的高质量网页。
iOS 国际化适配demo，包含应用内国际化和跟随系统两种情况。.zip
01-20
软件开发设计：PHP、QT、应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、...
移动开发之100%设备屏幕适配方案
居家小男的博客
09-01 1661
移动开发之100%设备屏幕适配方案 前言：本片博客将全面深入分析屏幕适配方案，针对不同项目要求，提供不同的适配框架分析，要求框架能100%适配所有设备。 目录 1.前期技术问题分析 2.适用于中小型项目适配方案 3.适用于大型项目适配方案 一、前期技术问题分析： 1.如何获取全局Context并解决Application冲突： 前言：从上图Context的类继承关系可以看到，有两个直系子类，分别是包装类和实现类。包装类下可以看到我们熟悉的身影：Service、Application、A.
移动端Web页面适配方案
weixin_33722405的博客
03-20 779
更新：完整js代码和sass mixin已上传于gitHub，点击此处可获取 =================================================== 移动端Web页面，即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容...
[转]移动app开发中多种设备尺寸适配问题
aomenqian4625的博客
05-28 443
移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS 平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。 　　加上An...
如何优雅的实现Android 屏幕适配方案
小羊子的技术专栏
08-02 8543
前言 一个月前看了今日头条新的屏幕适配方案，这是传送门，对此不禁拍案叫绝，为此我想把这种方案融入到我工具类中直接一行代码即可适配，如今最新 1.18.0 版 AndroidUtilCode 已有其适配方案，其相关函数在 ScreenUtils 中，相关 API 如下所示： adaptScreen4VerticalSlide : 适配垂直滑动的屏幕 adaptScreen4HorizontalSl...
前端移动端适配总结
weixin_33890526的博客
10-17 2874
meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片...
移动app开发中多种设备尺寸适配问题
qq_36142139的博客
06-26 550
#转载 https://blog.csdn.net/vanessary2016/article/details/51384911
移动端H5解惑-页面适配（二）
weixin_33725807的博客
08-04 2926
本文原文发表于2016年我的github，但是直到现在为止还有很多童鞋问我相关概念，于是整理下再分享一下。 原文链接：github.com/sunmaobin/s… 一、基础概念 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？ 移动端H5解惑-概念术语（一） 二、为什么要做页面适配 2.1 PC端为什么要解决浏览器兼容 因为在PC端，由于浏览器种...
几种移动开发技术的比较和选型
zidafone的博客
12-10 3783
首发：个人博客，更新&纠错&回复 移动开发很火，移动开发技术很多。都有哪些技术？相互对比如何？怎样选择？ 简单列了个表。 其中Native指原生语言，如安卓的java语言，苹果的objective-c或swift；Hybrid指混合开发，在前种语言基础上，借助WebView控件，将其中部分功能用前端技术实现；Html5指PhoneGap和HBuilder这种，最终会生成app安装包，但完
移动端H5开发的屏幕适配方案
热门推荐
Sophie_U的博客
07-27 1万+
移动端屏幕的几个概念1、什么是dpr？ dpr: device pixel ratio 设置像素比 —— dpr=物理像素/设备独立像素。 设置独立像素：密度无关像素，个人理解：设备的实际屏幕大小 物理像素：设备像素，显示设备中一个最微小的部件，个人理解：针对iphone retina屏幕，2倍的即屏幕用2px点来显示css为1px的内容，3倍的同理 2
移动终端适配策略：淘宝无线实践经验
"本文主要探讨了手机网站对多样化移动终端的适配问题，分享了淘宝无线实施的经验，提出两种常见的实现思路，并列举了搜狐和孔夫子网的实践案例。文章强调了在移动互联网时代，手机网站需要兼顾不同平台的特点，以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值