关键词：
目录
浏览器
浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。
PC端的浏览器主要包括Google（谷歌）公司的Chrome浏览器、Mozilla公司的Firefox浏览器和Edge浏览器等。
移动端设备主要包括Android、iOS等手机设备，屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。
国内的UC、QQ、百度等手机浏览器都是根据Webkit修改过来的内核，兼容移动端主流浏览器，处理Webkit内核浏览器即可
视口
视口：是浏览器显示页面内容的屏幕区域
视口主要包括布局视口、视觉视口和理想视口，视口能将大分辨率尺寸网页缩小显示在手机浏览器上，保证网页在手机上看起来更像在桌面浏览器中的样子。
布局视口：是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。
视觉视口：是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。
理想视口：是指对设备来讲最理想的视口尺寸。
meta视口标签
在<meta>标签中，将name属性设为viewport，即可设置视口。
在实际开发中，通常会将视口设置为不允许用户缩放页面、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。
<!-- 设置content 通知浏览器布局视口的宽度应该和设备的宽度一致 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta>标签的常用属性：
Normalize.css初始化默认样式
移动端的样式初始化。
在传统的PC端Web开发中，一些旧版本的浏览器不符合W3C标准，有些不支持HTML5和CSS3的新特性。
在移动Web开发中，几乎不用担心浏览器的兼容问题，因为移动端的浏览器基本上都是以WebKit内核为主，对HTML5和CSS3的支持非常好。
优点：
- 保护了有价值的默认值
- 恢复了浏览器的bug
- 是模块化的
- 拥有详细的文档
物理像素和物理像素比
物理像素点：是指屏幕显示的最小颗粒，是物理真实存在的，这是厂商出厂时就设置好了的。
PC端和早前的手机屏幕：1CSS像素 = 1物理像素。
我们开发时的1px不是一定等于1个物理像素的。
一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。
在高分辨率屏幕中，CSS使用的像素单位和屏幕显示的像素并不是一对一的，将屏幕像素除以CSS像素得到的就是设备像素比。为了解决这个问题，高分辨率设备的操作系统会让网页画面进行缩放，让大小看上去比较舒适，而网页中使用的像素也不必修改，尤其是网页中的文字，在高分辨率屏幕下的显示效果会更加细腻
Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度
二倍图
由于存在物理像素比，我们将css像素图片再移动端打开时会被放大，图片会变模糊。所以我们提前准备一张大两倍的图片，将他手动缩小放进去，即使被放大也依然是清晰的。我们准备的图片比我们实际需要的大小大二倍，这个方式就是二倍图。
二倍图可以理解为当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。
通常使用二倍图，但是现在也存在3倍图4倍图的情况，这个看实际开发公司需求。
背景图片的缩放background-size
background-size属性规定背景图像的尺寸。
/*只写一个参数 肯定是宽度 高度不设置 等比例缩放*/
/*也可以写百分比*/
background-size:宽度 高度;
background-size:cover; /*等比例拉伸 直到完全覆盖 图片可能显示不全*/
background-size:contain; /*当宽度或高度铺满时就不再拉伸了*/
SVG矢量图
网页中的图片可以分为两类，一类是小图标和简单的图形，另一类图片经常使用GIF，JPEG，PNG等格式，这些格式比较常见，但因为都是基于像素处理的，当放大时会失真，变得模糊。
可缩放矢量图形（SVG）是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）。
移动端开发选择
- 单独制作移动端页面
- 响应式页面兼容移动端
单独移动端页面
通常情况下，网页域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
响应式页面
响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。
通过判断屏幕宽度来改变样式，以适应不同终端。
响应式开发主要是为了解决移动互联网浏览的问题。
响应式页面的优点：
- 可以跨平台
- 便于搜索引擎收录
- 节约成本
CSS3盒子模型box-sizing
传统盒子模型： 盒子宽度 = CSS中设置的width+border+padding。
CSS3盒子模型： 盒子宽度 = CSS中设置的宽度width包含了border和padding，也就是说padding和border不会撑大盒子了。
移动端可以全部使用CSS3盒子模型；PC端如果完全需要兼容，就用传统模式，不考虑兼容性，就选择CSS3盒子模型。
/*CSS3盒子模型*/
box-sizing:border-box;
/*传统盒子模型*/
box-sizing:content-box;
特殊样式
/*点击高亮清除 设置为透明*/
-webkit-tap-highlight-color:transparent;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;
/*禁用长按页面时弹出菜单*/
-webkit-touch-callout:none;
移动web开发之less基础(代码片段)
今天学习less基础相关内容。本篇目录一、维护css弊端二、less介绍三、Less安装（注意如果使用vscode不需要安装less）Less使用3.1Less变量3.2Less编译3.3Less嵌套3.4Less运算一、维护css弊端CSS是一门非程序式语言，没有变量、函... 查看详情
移动web开发笔记(代码片段)
移动web开发笔记移动web开发笔记基础概念像素单位CSSpixels与devicepixelsCSSpixelsPPIDPIdevicePiexelRatio文字大小控制viewport响应式布局原则实现方式布局方案百分比布局流体布局弹性flexible布局flex-box布局图片处理普通设置响应式图片媒体... 查看详情
移动端web开发流式布局flex布局rem布局(代码片段)
文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less移动端Web开发流式布局在PC端进行网页制作时，经常使用固定像素的网页布局，但这种布局方式对小屏幕的设备不友好。为了适应小屏幕... 查看详情
移动web开发之rem适配布局(代码片段)
引入1.页面布局文字能否随着屏幕大小变化而变化2.流式布局和flex布局主要针对宽度布局，那高度如何设置3.怎样让屏幕发生变化的时候元素高度和宽度等比例缩放1.rem基础rem单位rem(rootem)是一个相对单位，类似于em，em... 查看详情
移动web开发之入门&视口(代码片段)
一、移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器... 查看详情
零基础学python后端开发篇第二十节--pythonweb开发一：web开发简介(代码片段)
...可以分为：客户端和服务端。丰富多彩的应用：1.WebAPP2.移动APPweb系统：1.客户端（前端）2.服务端（后端）3.全栈下面是我们的一个简单的示意图：举一个例子而言，手机应 查看详情
web开发移动端准备工作(代码片段)
<!-- 移动端准备工作： 1、<metaname="viewport" content="width-device-width,initial-sacle=1.0,maximum-scale=1.0,user-scalable=no"> 2、单位：px、pt、e 查看详情
移动web开发之rem基础&媒体查询(代码片段)
前端干货内容在黑马，本篇目录：一、rem基础1.1 rem单位二、媒体查询2.1什么是媒体查询2.2语法规范mediatype查询类型2.3案例：根据页面宽度改变背景变色2.4媒体查询+rem实现元素动态大小变2.5引入资源（理解... 查看详情
移动web开发之响应式布局(代码片段)
文章目录一、响应式开发原理1.1响应式开发原理1.2响应式布局容器二、bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3bootstrap布局容器2.4bootstrap栅格系统总结一、响应式开发原理1.1响应式开发原理就是使用媒体查询针对不同宽度的设... 查看详情
springboot之基础web开发(代码片段)
...SpringBoot的初级项目搭建了，接下来看如何实现一些Web开发中的基础功能。先看项目完整的目录结构：返回Json数据创建model文件夹，并新建Person类，代码如下：复制代码packagecom.example.hellospringboot.model;publicclassPe 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情
bytom移动端钱包sdk开发基础(代码片段)
比原项目仓库：Github地址：https://github.com/Bytom/bytomGitee地址：https://gitee.com/BytomBlockchain/bytomBytom-Mobile-Wallet-SDK是从bytom源码中抽离出的钱包层代码,并且对钱包层代码进行了改造。使用gomobile可以将代码编译成Android和iOS平台可用的SD... 查看详情
移动web开发之flex布局(代码片段)
...与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：1.如果是PC... 查看详情
移动web开发之flex布局(代码片段)
...与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：1.如果是PC... 查看详情
android移动应用开发之制作动画基础(代码片段)
文章目录帧动画主要文件目录MainActivityframe.xmlactivity_main.xml运行补间动画主要文件目录MainActivityalpha.xmlrorate.xmlscale.xmltranslate.xmlactivity_main.xml运行属性动画主要文件目录MainActivityactivity_main.xml运行帧动画顾名思义，需要我们准... 查看详情
青训营node.js基础-web应用开发-开发调试-线上部署(代码片段)
文章目录Web应用开发HTTP模块Koa介绍中间件常用中间件基于Koa的前端框架调试断点调试日志调试线上部署利用多核CPU进程守护复杂计算前端开发与后端开发对比前几天学了一些Node.js的基础，今天来学习Web应用开发，在开发... 查看详情
servlet基础(代码片段)
...础Java语言的动态Web技术，奠定了JavaEE的基础，使动态Web开发技术达到了一个新的境界。如今，Servlet在普遍使用的MVC模式的Web开发中仍占据了重要地位，目前流行的Web框架基本上都基于Servlet技术。Servlet简介Servlet是基于Java语言的... 查看详情