移动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. ...
随机推荐
- 读 Angular 代码风格指南
读 Angular 代码风格指南 本文写于 2021 年 1 月 17 日 原文地址:Angular 文档 该文章拥有完整的代码风格指南--大到如何编排文件夹,小到如何进行变量命名都涉及.但是与 ng ...
- python DOS 攻击,TCP压测脚本
pip3 install string&&scapy 1 #!/usr/bin env python 2 #-*-coding:utf-8-*- 3 import socket,ran ...
- 好客租房43-react组件基础综合案例-4获取评论信息
获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...
- [源码解析] TensorFlow 分布式之 ClusterCoordinator
[源码解析] TensorFlow 分布式之 ClusterCoordinator 目录 [源码解析] TensorFlow 分布式之 ClusterCoordinator 1. 思路 1.1 使用 ...
- 个人冲刺(一)——体温上报app(二阶段)
冲刺任务:完成app登录和注册页面的布局 activity_register.xml <?xml version="1.0" encoding="utf-8&quo ...
- 个人冲刺(五)——体温上报app(一阶段)
任务:完成了体温录入.体温记录删除.体温修改以及历史记录查询操作 体温录入 public void insertDB(View view) { MyDBHelper mydbh=new MyDBHel ...
- 2020级cpp上机考试题解#B卷
A卷的第七题我只会一个个排除的方法 意思就是暂时没有好办法所以A卷不搞了 1:递归函数求数列 题意: 有一个递归函数int f(int m),计算结果代表了数列的第m项.当m等于1时,函数结果返回1: ...
- Java实现飞机大战游戏
飞机大战详细文档 文末有源代码,以及本游戏使用的所有素材,将plane2文件复制在src文件下可以直接运行. 实现效果: 结构设计 角色设计 飞行对象类 FlyObject 战机类 我的飞机 MyPl ...
- 单例模式与pickle模块
目录 设计模式之单例模式 pickle模块 设计模式之单例模式 设计模式是前辈们发明的经过反复验证用于解决固定问题的固定套路,在IT行业中设计模式总共有23种,可以分为三大类:创建型.结构型.行为型. ...
- 接口测试postman深度挖掘应用②
上一篇文章我们已经介绍了postman的基本用法,以及接口测试原理.未关注博主的可以关注下博主,后期测试安全,以及各种工具用法,编程语言都会有讲解的 老样子:①先补习基础知识: ②补充上一章节由于过 ...