移动端基础

最新推荐文章于 2025-12-26 15:15:00 发布
原创 最新推荐文章于 2025-12-26 15:15:00 发布 · 371 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #css3

该博客聚焦移动端前端开发，介绍了视口的形式、标签及设置，阐述了二倍图的像素比、多倍图应用、背景缩放和切图方法。还探讨了移动端开发的选择，如单独制作和响应式，给出了移动端技术解决方案，包括初始化、盒子模型和特殊样式，最后提及常见布局。

移动端基础

一.了解

在这里插入图片描述
在这里插入图片描述

二.视口

1.视口形式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.视口标签

在这里插入图片描述

3.viewport设置

在这里插入图片描述

三.二倍图

1.像素比

pc是1px=1个物理像素
但是移动端不尽相同
所以有了多倍图
在这里插入图片描述

2.多倍图

在这里插入图片描述

3.背景缩放及使用（background-size）

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

4.多倍图切图

在这里插入图片描述

四.移动端开发选择

1.单独制作

在这里插入图片描述

2.响应式

在这里插入图片描述

3.总结

在这里插入图片描述

五.移动端技术解决方案

1.初始化

在这里插入图片描述

2.盒子模型

在这里插入图片描述

3.特殊样式

在这里插入图片描述

六.常见布局

在这里插入图片描述

移动端基础介绍
yexiang优快云的专栏
05-08 425
一、移动端基础介绍 1 浏览器现状 PC端常见浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器 UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样 总结：兼容移动端主流浏览器，处理Webkit内核浏览器
前端移动端布局的俩种方式（单独制作移动端页面、响应式页面布局）
comekeywords的博客
04-11 999
列嵌套最好row套row，可以自动消除父亲的padding，而且高度自动和父亲一样高。第一子盒子默认索引号为0，设置order为-1即可让该盒子成为第一个子盒子。align-content侧轴felx-wrap换行后可设置，单行下无效。变量命名规范：必须有@前缀，不包含特殊字符，不以数字开头，大小写敏感。align-items，align-content侧轴排列。例如：行（row）盒子内，每个盒子占三份，四个盒子共十二份。子元素根据主轴排列，设置主轴后剩下的即为侧轴。flex-direction主轴方向。
移动端基础知识详解
我是张跑跑
08-29 1908
对于 Web 而言，移动端的开发已是基本功，但是很多概念，基础知识却是我们在 pc 端开发中完全接触不到的。今次有机会系统的学习移动端的基础知识，在此记录和分享。
移动端基础知识
m0_73783119的博客
01-30 304
国内的手机浏览器都是根据Webkit修改过来的内核，国内没有自主研发的内核，兼容移动端主要浏览器，处理好Webkit内核浏览器即可现在市场常见的移动端开发有 单独制作移动端页面和响应式页面两种方案现在市场主流的选择还是单独制作移动端页面。
✨移动端基础知识合集
qq_61145525的博客
07-21 1096
移动端基础，包括相关基础知识，Flex、rem、响应式布局
移动端布局——移动端基础知识
m0_45659764的博客
03-31 402
一、移动端特点 PC端网页和移动端网页有什么不同？ PC屏幕大，网页固定版心 手机屏幕小，网页宽度多数为100% 如何在电脑里面边写代码边调试移动端网页效果？ 谷歌模拟器 1.1 屏幕尺寸（了解） 屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量 1.2 分辨率 PC分辨率 1920*1080 1366*768 ..... 缩放150% (1920/150%)*(1080/150%) 总结 硬件分辨率（出厂设置） 缩放调节的分辨率（软件设置） 分辨率分类 物理...
1、移动端基础
虽然但是
12-23 1158
移动端基础
一、移动端基础
快乐de馒头
12-30 467
1、移动端基础 1.1 浏览器现状 pc端常见浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器 UC浏览器、QQ浏览器、欧鹏浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器、以及其它杂牌浏览器。 国内UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理webk
移动端基础Rem
wh15133366997的博客
08-18 138
1、单独指针移动端页面(主流) | 2、响应式页面兼容移动端(其次)京东商城手机版 | 三星手机官网淘宝触摸板 |苏宁易购手机版。
(源码)基于Vue框架的移动端基础UI组件库.zip
04-20
# 基于Vue框架的移动端基础UI组件库 ## 项目简介 本项目是一个基于Vue框架的移动端UI组件库，旨在为开发者提供一系列常见的基础UI组件，帮助快速搭建移动端项目。通过封装常用的交互组件（如Toast、下拉刷新、滚动...
基于_Mpx 小程序框架_的移动端基础组件库.zip
09-18
基于Mpx框架的移动端基础组件库，是专为使用Mpx框架开发小程序的开发者量身打造的。它集合了多种常用的UI组件，例如按钮、输入框、列表、表格、表单、导航栏等，这些组件经过优化，能够适配不同的屏幕尺寸和分辨率，...
伙伴匹配系统开发实战（一）：Spring Boot + Vue3 移动端基础架构搭建
08-01
在构建移动端基础架构时，还需要考虑移动端设备的适配问题，确保系统在不同尺寸的移动设备上都能有良好的用户体验。 最后，本篇实战分享还提到了一些具体的实践，比如如何使用Maven进行项目管理、如何利用Docker...
移动端基础事件总结与应用
08-31
本文将深入探讨移动端的基础事件，主要包括触摸事件和设备加速度事件。了解并掌握这些事件，能够帮助开发者创建更丰富的用户体验。 1. 触摸事件 触摸事件是移动端特有的事件，它们对应于用户的触摸屏幕操作。触摸...
移动端基础知识以及适配方法.pdf
04-16
### 移动端基础知识 1. **物理像素（Physical Pixels）**： 物理像素指的是显示屏上实际存在的像素点，它是由三原色（红、绿、蓝）组成的一个单元。屏幕分辨率就是指物理像素的多少，比如常见的1080×1920表示屏幕...
Css画圆弧的方法
Wx001214的博客
12-26 256
clip-path是通过 “裁剪路径” 控制元素可见区域的方式，可绘制更灵活的圆弧形态，支持半圆、1/4 圆弧、自定义弧形等，甚至可以组合多种形状。path()中使用 SVG 的圆弧指令A/* SVG path语法：M(起始点) A(圆弧参数) L(连线) Z(闭合)，裁剪出1/4圆弧 */简单圆角 / 圆形 / 矩形圆弧：优先使用，语法简单、性能好、兼容性优自定义圆弧（半圆、1/4 圆弧、不规则弧形）：使用clip-path，灵活性强不闭合圆弧线条：可通过。
CSS 基础（第一部分）
inferno_lucerne的博客
12-25 584
本文系统介绍了CSS样式表的基本语法。主要内容包括：1）CSS基本结构，包含定义、语法规则和4种添加方式（内联、内部、外部、导入）；2）字体样式控制，涵盖字体类型、大小、风格、粗细等7种属性和颜色设置；3）段落格式设置，包括10种文本排版属性如对齐、缩进、行距、字符间距等；4）背景样式配置，涉及6种背景属性及其复合写法。通过选择器与属性值的组合，CSS实现了对网页元素的精确样式控制，使内容与表现分离。
前端面试题：CSS BFC
u011286604的博客
12-26 927
本文深入解析BFC（块级格式化上下文）在前端面试中的核心考点。从BFC的定义、触发条件到应用场景全面剖析，重点讲解其隔离性、清除浮动、防止margin塌陷等特性。文章提供了多种BFC触发方式（推荐display:flow-root），并通过代码示例演示解决两栏布局、文字环绕等实际问题。同时指出常见误区，强调BFC与现代布局方案的关系，最后给出面试答题技巧：定义+举例+代码+实战经验的组合回答方式，帮助开发者系统掌握这一高频面试知识点。
前端 | 吃透CSS视觉特效：圆角、渐变、动画与变换核心解析
最新发布
张较瘦
12-26 898
本文深入解析CSS四大视觉特效：圆角、渐变、动画与变换的核心概念与实现原理。通过实战案例演示如何使用border-radius创建圆形头像和胶囊按钮，利用linear-gradient和radial-gradient实现渐变色按钮和光斑背景，以及transform属性实现悬停缩放卡片和旋转图标效果。文章强调理解底层机制而非简单复制代码，帮助开发者灵活运用这些特性打造精美UI，同时兼顾性能优化。每个特性均配有可运行代码示例，便于读者快速掌握核心应用场景。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值