移动端web简介使用基础

最新推荐文章于 2024-07-11 13:45:07 发布
最新推荐文章于 2024-07-11 13:45:07 发布
阅读量814 收藏
点赞数
文章标签： web 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45846980/article/details/109562715
版权

 移动端在开发逐渐移动化，过程中是必不可少，随着移动端越来越发达，以后移动端技术就会更加新颖和高端。但我们还是得从基础做起，先来学习下基础的移动端web

移动端web基础

什么是移动web

 移动web就是在手机浏览器里面访问web页面（如，小米移动端web，京东移动端web……）
在这里插入图片描述
在这里插入图片描述

为什么要写web页面

 响应式布局无法完全满足各种网站的需求

移动web和pc端web的区别

 设备大小决定浏览的宽高

  • 不同点
    pc端，因为pc端的显示器，不会经常改变，元素设置为固定的
    pc端的操作是大多鼠标事件，键盘事件

    移动端更新换代的速度很快,设备也大小不一,手机页面布局,大多为相对的,(rem布局，em布局考虑如何让页面适配不同屏幕大小
    移动端兼容各种不同系统
    移动端的操作大多是触摸事件

  • 相同点
    本质上都是使用H5+C3进行开发

移动web和移动app的区别

  • 移动web

最低0.47元/天 解锁文章
weixin_45846980
关注
（一）移动端 Web 开发基础
weixin_46227563的博客
04-17 2485
文章目录一、移动 Web 开发基础概念1. 像素(1) 分辨率(2) 物理像素(3) CSS 像素(4) 设备像素比(5) 标清屏和高清屏(6) 缩放(7) PPI / DPI2. 视口 viewport二、移动 Web 开发基础知识1. box-sizing2. 图标字体3. flex 布局(1) 什么是 flex 布局(2) flex 布局的基本概念(3) flex 容器的属性(4) flex 项目的属性4. 媒体查询(1) 什么是媒体查询（media query）(2) 为什么需要媒体查询(3) 媒体
移动端web开发
lzh17538073353的博客
08-10 2828
随着互联网技术的快速发展，加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。 移动端Web主要指运行在移动端（手机、ipad）的web页面, 因为具备HTML5特性也叫H5页面、Web App等。 【H5页面、微网页、微站、wap站、webAPP】 如:京东商城手机版，淘宝触屏版，苏宁易购手机版 ...
移动web开发（01）
最新发布
m0_56947432的博客
07-11 1184
布局视口为啥设置为980px？因为我们PC端的网页一般就是1000左右，所以差不多能显示完。布局视口的缺点，就是现实的pc的网页的内容会比较小。
移动端Web基础--Viewport
xiaoxu的博客
11-02 1180
文章目录移动端的三个视口布局视口视觉视口理想视口 要想深刻理解Viewport，需知道像素的有关知识。大家可以参照我前面总结的关于像素的博客：移动端Web基础–像素 我们常常会看到这样一个标签 <meta name="viewport" content="width=device-width, initial-scale=1.0, m
移动Web简介
UNDEFINED_AUBE的博客
12-29 407
1.移动Web其实就是移动端上的网页，但又不是APP 2.移动端的浏览器兼容性基本上只需要考虑wbkit内核即可 3.如何在谷歌浏览器中查看移动端设备的窗口： 检查  --> 一般是用旧版谷歌来查看移动端页面的大小，不仅可以查看不同的移动设备，还可以缩放
移动端网页
difuchai5874的博客
04-18 959
1.手机适配协作模式 转载自：https://github.com/amfe/article/issues/17 2.几个基本概念 1.视窗viewport visual viewport虚拟视窗 layout viewport布局视窗——比虚拟视窗大，可理解为，不改变大小或形状的大图像 2.像素换算 物理像素(physical pixel)：物理像素又被称为设备像素，他是...
极速问诊移动端Web网页设计（ rem布局 ）
06-03
在移动端Web开发中，设计师和开发者通常会将根元素的字体大小设置为一个固定的值（如`10px`或`16px`），然后使用`rem`单位来定义其他元素的尺寸。例如，若设置`html`元素的`font-size`为`16px`，那么`1rem`就等于`16...
移动端web学习笔记.doc
07-23
在移动端Web开发中，了解和...以上就是移动端Web开发的一些基础要点，包括viewport设置、Base.css编写、自适应布局、轮播图实现、媒体查询以及栅格系统的使用。掌握这些知识将有助于构建具有良好用户体验的移动端网页。
orderser.zip_移动端web
09-19
综上所述，"orderser.zip_移动端web"所涵盖的知识点包括：用户管理、菜单管理、接口设计、安全性、性能优化、响应式设计以及测试与维护。这些都是构建一个高效、安全、用户友好的移动端订餐系统Web端所必需的技术...
移动web
wow_tutou的博客
05-15 290
流式布局 1，流式布局： ​ 使用百分比布局，是一个非固定的像素，内容向两侧填充，理解成流动的布局 2，视觉窗口： ​ viewport，移动端特有的，这是一个虚拟的区域，承载网页的 ​ 分三类：设备视口=页面视口，理想视口：一种理想的状态 ​ 承载的关系：浏览器------->viewport-------->网页 3，适配要求： ​ 1）网页的宽度必须和浏览器的宽度...
移动端web登录界面
04-19
几个可以应用在移动端的web登录界面，响应式界面设计。
移动端web开发（一）
ANNENBERG的博客
05-24 506
适配问题（手机屏幕尺寸不一） 解决方案 ...
移动端页面（一）
libufan的博客
07-27 271
今天写点关于移动端的东西，先写几个名词 屏幕尺寸： 指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。 常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。 屏幕分辨率：（iphone6 750*1334） 指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵...
移动端web总结
qq_35218523的博客
12-03 255
1.流式布局（百分比布局） 1.流式布局，就是百分比布局，也称非固定像素布局。 2.通过盒子的宽度设置为百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 2.flex布局 1.flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 2. 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 =
移动端Web开发
lixiaohong2012的博客
07-25 806
移动web调试使用chrome浏览器手机web页，和PC端web页其实差别不大。主要体现在以下几点： 1、移动web页需要在head里面加上这一 句：<meta name="viewport" content="width=device-width, initial-scale=1.0" />。其作用是声明页面宽度为设备宽度，不允许缩放。具体用法请自行百度。 2、移动Web页尽可能使用百分比设置
移动web简介
weixin_65635437的博客
06-07 1161
用于展示在移动设备上的网页(web)，称之为移动端页面。移动设备泛指手机、平板等设备。
移动web(看这一篇就够了)
一个前端开发者
03-21 1370
移动web第一天🔥 今日学习目标 字体图标 平面转换 渐变 字体图标 目标：使用字体图标技巧实现网页中简洁的图标效果 1、字体图标的使用 步骤：1、登录iconfont官网，选择对应的字体图标添加到购物车 ​ 2、下载选择好的字体图标（添加到项目进行下载） ​ 3、解压下载好的字体图标文件 ​ 4、把相关文件拖到项目文件夹中 ​ 5、按照提示使用字体图标 2、购物车案例 3、上传SVG矢量图 为何需要上传矢量图 原因：iconfont字体图标库不一定能满足我们实际开发需求。 解决：
移动端Web开发最佳实践指南
“移动端web开发最佳实践是一篇关于移动端Web开发的文章，主要涵盖了移动Web开发的最佳实践，包括响应式设计、平台选择、媒体查询、文字排版、流体布局、图片加载、DOM操作性能优化和触屏事件等方面。这篇文章对初学...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值