初识移动端

最新推荐文章于 2025-05-01 08:38:22 发布
最新推荐文章于 2025-05-01 08:38:22 发布
阅读量203 收藏
点赞数
文章标签： 前端 css 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/caigegeya/article/details/123648977
版权
本文探讨了如何使用@media屏幕尺寸适应和rem/em单位在不同设备上的应用，以及安卓与苹果的尺寸单位差异。重点讲解了rem的响应式特性和em跟随父元素的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.借用media来改变不同尺寸下内容的大小

就是借用@media screen and来定义不同的值

 

需要注意的是 （）里的内容可以写max 也可以min 定义最大值与最小值

最关键的就是 max需要从大往下下 范围   当是min的时候就需要从小往大的范围写 

2.rem与em的区别

rem一般用于移动端

移动端一般有尺寸的地方要用rem

 1rem 默认浏览器字号16px 但会根据 根变化   就是html的变化而变化

em 会随着父级影响

3.安卓和苹果

 

 安卓是dp与px之间的关系

 4.盒子模型的回忆

标准盒子模型  大小等于内容+padding+boder

怪异盒子模型  （box-sizing： 默认 content-box 标准内容盒  boder-box就是怪异盒子）

区别就是怪异盒子模型 width height就是盒子大小

CC是小白
关注
初识移动端深度学习推理框架MNN | MNN1.2版本编译安装 | 示例工程测试 |【MNN】
专注于AI领域前沿技术学习与分享：目标检测、图像修复、超分重建、AI工程化
06-15 710
初识移动端深度学习推理框架MNN | MNN1.2版本编译安装 | 示例工程测试初识移动端深度学习推理框架MNNMNN 正确编译和安装 【1.2版本】Demo Instructions 【示例工程测试】MNN Python API 使用MNN python 官方 demo 初识移动端深度学习推理框架MNN MNN特点一顿夸— 如何评价阿里开源的移动端深度学习推理框架mnn？ MNN 正确编译和安装 【1.2版本】 git clone https://github.com/alibaba/MNN.g
移动端初识
weixin_45017393的博客
10-12 163
移动端基础 移动端浏览器我们主要对webkit内核进行兼容 我们现在开发的移动端主要针对手机端开发 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 学会兼容谷歌浏览器模拟手机界面以及调试 视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口、和理想视口 布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS,Android基本都将这个视口分辨率设置为980px,所以PC上的页面大
33. 初识移动端CSS
potato123232的博客
07-11 477
从33章之后我们主要针对移动端CSS移动端浏览器基本不需要考虑兼容性问题，原因是移动端的浏览器开发的都比较晚我们可以通过chrome调试工具模拟移动端，打开调试工具后点击这里，就可以看到手机访问时的情况了使用手机端访问相同的地址有时会有不同的效果（根据不同设备进行重定向），比如我们用移动端访问jd.com（会重定向到m.jd.com），一般来讲移动端页面的地址会在原有地址前加m.再用PC端访问有两种移动端页面，一种是开发的时候直接针对移动端进行开发，像上面京东那样（单独制作移动端页面）另一种是页面会根据不同
2018-06-07 初识移动端（响应式）
Enoch‘s Blog
06-07 234
前言：今天初次了解了移动端的一些常识，包括PC端和移动端的区别，媒体查询等的相关操作,以及国内的网站如何实现不同的端展示不同的样式。 1、媒体查询（附带MDN解释） 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。 ...
初识移动端web开发
weixin_30733003的博客
06-05 98
http://sc.chinaz.com/info/130410113358.htm 转载于:https://www.cnblogs.com/cgf19920817/p/4554339.html
初识移动端跨平台（JavaScript篇）
BUG若只如初见
10-09 435
因为最近项目需要跨平台，在网上找到这个demo。本文主要讲WebViewJavascriptBridge在ios端怎么样使用。首先简单说一下跨平台。由于现在很多产品都是有安卓版跟ios版，就意味着同一样东西要出两套，由两组人去完成，不仅增加了开发成本，也大大加剧了维护成本。近期提出了跨平台的思路，用html写页面，分别用webview（ios），（安卓）来加载，对某些html无法调用的硬件，通过双方
关于移动端的适配
weixin_34416754的博客
08-03 90
　　记得第一次做移动端页面的时候，发现手机上显示的页面好小啊，还有横向滚动条出现，当时心里面是“我次奥~怎么这样子啊~”。后来才知道是因为移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的页面宽度设为980或者1024（也可能是其它值，这个是由设备自己决定的）， 　　那么如何让页面正常的在移动端显示呢？很...
移动端初识1
weixin_34290390的博客
06-19 91
viewport(可视区窗口) <metaname="viewport"content="">（重要） 默认不设置viewport,一般可视区宽度在移动端是980. width:可视区的宽度(number||device-width) user-scalable是否允许用户缩放(yes||no),---->>i...
移动端的网页Viewport设置初识
学而不思则忘
08-17 356
为了使移动设备能够完整的显示网页，我们可以在< head >中添加 meta 标签，对viewport 专门加以设置： <meta name="viewport" content="width=device-width,initial-scale=1.0"> 上面代码做了两件事： 一、设置viewport 的宽度为 device-width，即显示窗口宽度等于设备宽度，也...
html 移动端 rem.js
07-09
html 移动端 rem.js
初识前端
01-08
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的...
移动开发技术作业：设计一个APP基础页面
2201_75304718的博客
11-18 894
通过本项目的设计与实现，我们创建了一个简洁但功能齐全的社交平台APP框架，涵盖了首页的Tab切换、列表页面的数据展示与跳转、以及详情页面中的背景音乐播放功能。在实现过程中，采用了 `Fragment`、`RecyclerView` 和 `Service` 等技术，确保了不同页面间的无缝切换和数据的流畅展示。整个系统设计注重用户体验，简化了操作流程，提升了使用便捷性，并为后续的功能扩展奠定了坚实的基础。Android studio: Android studio开发 - Gitee.com。
Android 初识AIDL，rust移动端跨平台开发
wa2231a的博客
01-27 565
进程需要将其对象分解成操作系统能够识别的原语，并将对象编组成跨越边界的对象。 编写执行这一编组操作的代码是一项繁琐的工作，因此 Android 会使用 AIDL 来处理。 通过这种机制，我们只需要写好 aidl 接口文件，编译时系统会帮我们生成 Binder 接口。 简而言之，我们需要打包我们实体类的同时写一个aidl接口文件。 官方文档定义： 使用AIDL时会对内存进行读取，所以经常使用会造成程序变慢，所以不要过多使用 当只使用IPC，不用多线程并使用多个应用程序时，只使用binder就行了 而只有用IP
改善WebStorm性能
四荒八极的博客
04-29 1477
默认情况下，WebStorm会在你输入代码时进行分析，并高亮显示当前文件中发现的所有问题。它的主要目标是减少IDE的总体索引时间和CPU使用率，因此请确保在“Settings | Plugins”的“Installed”选项卡上启用了Shared Project Indexes插件。可以转到“Settings | Editor | Inspections”，找到“未使用的全局符号检查（Unused global symbol）”，取消选中。这些插件支持我们大多数用户的应用场景，但你不需要的插件可以禁用。
watch 数组 Vue 3
最新发布
qq_30049249的博客
05-01 93
发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。
使用vue2 开发一个纯静态的校园二手交易平台-前端项目练习
Json的知识梦工厂
04-27 737
因为最近在学习vue相关的技术，所以就根据学习的前端技术，来写一些纯前端的项目来练习，这篇文章主要是分享一下 我做的这个项目的一些功能，如果最近你也在学习前端，希望这篇文章能帮助到你，大家也可以仿照这个项目，自己尝试着写一些完整的功能，从而提高自己的编程能力。这个项目 使用的技术是vue2 做的。：用户可以在个人中心查看自己的交易记录、发布的商品、参与的圈子、个人信息等，便于管理账户和交易信息。：提供交换物品的功能，用户可以发布自己想交换的物品，并与其他用户进行交换，促进物品的循环利用。
Vue2、Vue3区别之响应式原理
2203_75479159的博客
04-27 1271
工作原理：通过遍历数据对象的每个属性，使用Object.defineProperty来定义getter和setter。当数据被访问时，收集依赖；当数据变化时，触发更新。但这种方法有一些限制，比如无法检测到对象属性的添加或删除，需要借助Vue.set或Vue.delete方法。对于数组，Vue 2需要重写数组的方法（如push、pop等）来触发更新，而不能直接通过索引设置元素或修改长度。实现步骤：Object.defineProperty()语法 代码示例： 2. 局限性 无法检测动态属性： 解
Rollup、Webpack、Esbuild 和 Vite 前端打包工具
weixin_42283818的博客
04-27 1081
Rollup、Webpack、Esbuild 和 Vite 都是前端开发中常用的打包工具，它们各有特点，以下是对它们的详细对比：
"短视频营销利器：剪映APP功能使用与营销案例分析
通过对任务导入、任务分解、任务实施、任务解决和任务复盘等环节的使用，为移动端短视频的后期制作新时代、新青年，短视频助力蓝莓产业兴农提供了有效的操作指南。此外，本文还以一个实际案例为例，讨论了如何利用短...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值