移动web开发02
















虽然视口很多,但是我们只用一个。就是理想视口。







单标签。






原本是高宽都300的。后来变成移动端后没有变成300/750,也不是300/1334。而是占据了一大半(300/375)。甚至375就满屏了。所以1px不是1物理像素。物理像素比是2。



































下载下来,后续使用直接引用就好了。








可以改变默认的效果。






可以根据屏幕的大小自由伸缩。




小于320不能再缩了,大于980就不能再扩了。有伸缩的上下限。超过980了盒子大小就不变了,小于320了就盒子大小也不会变小,有滚动条可以体现没有变小。











app布局要使用到固定定位!

8% ,10% ,57%, 25%按百分比分出来的。先写宽度,高度后面在讲,因为也无能为力。








图片默认和文字的基线对齐,所以图片居中不了。所以要专门写一行代码让文字和图片居中对齐。



不用加a链接,到时候直接在li里用js加跳转,因为直接加a就太小了。
移动端和pc端最大的差别就是移动端会缩放。















等比缩放按钮。先等比例缩小或放大才能测量位置。这个位置才是准确的。




搜索模块要用固定定位,因为向下滑动的时候,还要保持在顶部。


一个大盒子里面有三个小盒子。


切的是盒子,没有切图片的圆角,所以要hidden大盒子。
图片默认有空隙,所以要去除空隙。

流式布局只管宽度就好!!







50%, 25%, 25%





在左边加小边框就可以有竖线了。


底下模块大同小异。
前面顶部叉号的小bug。



移动web开发02的更多相关文章
- 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_flex布局
移动web开发--flex布局 1.0 传统布局和flex布局对比 1.1 传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广 ...
- 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局
移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...
- Web开发基本准则-55实录-Web访问安全
Web开发工程师请阅读下面的前端开发准则,这是第一部分,强调了过去几年里我们注意到的Web工程师务须处理的Web访问安全基础点.尤其是一些从传统软件开发转入互联网开发的工程师,请仔细阅读,不要因为忽视 ...
- WEB开发中常用的正则表达式
在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符 ...
- WEB开发中常用的正则表达式集合
在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符 ...
- PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议/服务器、数据库、服务器web开发、PHP简介/常见语法、PHPheader()、 PHP_POST/GET数据获取和错误处理
C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可 洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...
- 微信小程序开发 -- 02
微信小程序开发 --02 微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码 ...
- 【转】软件开发工具介绍之 6.Web开发工具
[本文转自http://www.cnblogs.com/dusonchen/archive/2011/02/09/1739087.html ] 1.EditPlus 无论是编写xhtml页面,还是cs ...
- [python] python django web 开发 —— 15分钟送到会用(只能送你到这了)
1.安装python环境 1.1 安装python包管理器: wget https://bootstrap.pypa.io/get-pip.py sudo python get-pip.py 1. ...
随机推荐
- GO 语言入门(一)
GO 语言入门(一) 本文写于 2020 年 1 月 18 日 Go 由 Google 工程师 Robert Griesemer,Rob Pike 和 Ken Thompson 设计的一门编程语言,第 ...
- http协议与html
目录 前端 HTTP协议 HTML简介 head内常见标签 body内基本标签 body内基本标签 特殊字符 布局标签(div.span) 图片标签(img) 超链接标签(a) 标签的两大重要参数(i ...
- 使用 Vite 插件开发构建 Tampermonkey 用户脚本
起因 一直以来,我都是直接在浏览器 Tampermonkey 扩展页面直接新建用户脚本来开发的: 对于一些简单的脚本,这没有什么问题,即改即看.但当代码多了以后问题就来了,自带编辑器开发体验确实不太舒 ...
- Druid数据库连接池使用体验
写在前面 在实际工作中我们我们使用较多的则是Spring默认的HikariDataSource数据库连接池,但是它无法提供可视化监控SQL这一能力,而这在很多场景下往往又是我们需要的功能,因此今天来学 ...
- vue3 迫不得已我硬着头皮查看了keepalive的源代码,解决了线上的问题
1.通过本文可以了解到vue3 keepalive功能 2.通过本文可以了解到vue3 keepalive使用场景 3.通过本文可以学习到vue3 keepalive真实的使用过程 4.通过本文可以学 ...
- BSP-充电名词解释
充电名词解释 A~G H~N O~T U~Z A~G ACA = accessory charger adapter = 辅助充电适配器 ACC = apparent charge capacity ...
- nginx 部署前端资源的最佳方案
前言 最近刚来一个运维小伙伴,做线上环境的部署的时候,前端更新资源后,总是需要清缓存才能看到个更新后的结果.客户那边也反馈更新了功能,看不到. 方案 前端小伙伴应该都知道浏览器的缓存策略,协商缓存和强 ...
- 000 上传本地库到Github远程库过程全记录
20220613 Github上新创建了一个CsImage库,之后本地创建了一个对应名称的目录,并创建本地库,进行了上传操作,记录一下过程 1.Github上CsImage库创建完成 Github上创 ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
- exe4j下载和使用
https://blog.csdn.net/weixin_44678104/article/details/101015065