薛定谔的猫

市场上的移动端大多数为flex布局，此时我们用到了rem这个单位，但是rem需要媒体查询，要根据页面是尺寸进行修改，而vm/vh省去各种判断和修改，像B站就通过vue和vm写的。为什么现在还是px，和人用的多，这是因为vm/vh的兼容性比较差，主要用于移动端开发。我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所有开发中使用vw就好啦(等比例缩放)。当前屏幕视口是375px，则1vm就是3.75px,如果当前视口为414，则1vh就是4.14px。超级简单，元素单位之间使用新单位vw/vh即可。

因为本效果图采取 1280的宽度， 而Bootstrap 里面 container宽度 最大为 1170px，因此我们需要手动改下container宽度。① 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的。④ 策略： 我们先布局 md以上的 pc端布局，最后根据实际需求在修改 小屏幕 和 超小屏幕的 特殊布局样式。③ 屏幕缩放发现 超小屏幕布局又发生变化，因此我们需要为 超小屏幕根据需求改变布局。② 屏幕缩放发现 小屏幕 布局发生变化，因此我们需要为 小屏幕根据需求改变布局。技术：bootstrap框架。

栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数 的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会 自动分为最多12列。

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它 简洁灵活，使得 Web 开发更加快捷。Bootstrap中文网 (bootcss.com)推荐使用：框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和 插件。使用者要按照框架所规定的某种规范进行开发。1. 优点标准化的html+css编码规范提供了一套简洁、直观、强悍的组件。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。① 当我们屏幕大于等于800像素，我们给nav宽度为800px，因为里面子盒子需要浮动，所以nav需要清除浮动。② nav里面包含8个小li 盒子，每个盒子的宽度定为 100px， 高度为 30px，浮动一行显示。③ 当我们屏幕缩放，宽度小于800像素的时候， nav盒子宽度修改为 100% 宽度。小屏幕（平板，大于等于 768px）：设置宽度为 750px。

git 可以把我们的本地网站提交上传到远程仓库（码云 gitee）里面 类似以前的 ftp。最后： 如果提交网站，你不愿意用git 提交， 可以直接找到仓库，里面有文件，选择上传本地文件即可。稍等之后，会拿到地址，就可以利用这个地址来预览网页了[外链图片转存失败,源站可能有防盗链。但是，1个小时内，只能上传 20个以内的文件， 前端人员，git必备技能。利用git 提交 把本地网站提交到 码云新建的仓库里面。头部模块 .header 高度为 80px。码云 就是远程仓库， 类似服务器。

手机淘宝团队出的简洁高效 移动端适配库我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html 文字大小就可以了比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以里面页面元素rem值： 页面元素的px 值 / 75剩余的，让flexible.js来去算github地址：amfe/lib-flexible: 可伸缩布局方案 (git

访问地址：苏宁易购(Suning.com)-家电家装成套购，专注服务省心购！ 1. 技术选型方案：我们采取单独制作移动页面方案技术：布局采取rem适配布局（less + rem + 媒体查询）设计图： 本设计图采用 750px 设计尺寸2. 搭建相关文件夹结构3. 设置视口标签以及引入初始化样式 4. 设置公共common.less文件1. 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要2. 我们关心的尺寸有 320px、360p

思考1. 我们适配的目标是什么？ 2. 怎么去达到这个目标的？ 3. 在实际的开发当中使用？答案1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后 页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸 也会发生变化，从而达到等比缩放的适配。① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询） ② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。不方便维护及扩展，不利于复用。CSS 没有很好的计算能力非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。代码重复，没有计算能力 Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器。做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CS

媒体查询（Media Query）是CSS3新语法。使用 @media 查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询用 @media 开头 注意@符号mediatype 媒体类型关键字 and not onlymedia feature 媒体特性 必须有小括号将不同的终端设备划分成不同的类型，称为媒体类型关键字将媒体

比如，根元素（html）设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。rem (root em)是一个相对单位，类似于em，em是父元素字体大小。而rem可以统一控制元素的大小。相对于html元素的字体大小。

做法：1.打开PS缩放一半 2.量出需要的图标，在css中设置top和left负值 3.css中将缩放后的大小重新给就是background-size。起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是top。方案：我们采取单独制作移动页面方案。要设置为主轴为y轴,侧轴居中。背景渐变必须添加浏览器私有前缀。技术：布局采取flex布局。利用属性选择器更换背景图片。sales-bd模块制作。第一个a要取消下边框。

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch.flex就是从剩余空间分配，如果没有宽度，那就会按照子元素比例分配。数值越小，排列越靠前，默认为0。flex 属性定义子项目分配剩余空间，用flex来表示占多少。align-self 控制子项自己在侧轴的排列方式。order属性定义子项的排列顺序（前后顺序）flex 子项目占的份数。

align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分 配剩余空间等属性值。注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。align-content：设置侧轴上的子元素的排列方式（多行）align-content：设置侧轴上的子元素的排列方式（多行）

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成 员，称为 Flex 项目（flex item），简称"项目"。flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。总结flex布局原理： 就是通过给父盒子添加flex属性，来控制子盒 子的位置和排列方式。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局。

2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。② 给 div 只需要添加 “display：flex” 即可。如果是以前的做法，行内元素还要转换，不然是不能直接设置高度的。① span 直接给宽度和高度，背景颜色，还有蓝色边框。1. 如果是PC端页面布局，我们还是传统布局。操作方便，布局极为简单，移动端应用很广泛。IE 11或更低版本，不支持或仅部分支持。局限性，不能再移动端很好的布局。里面的3个span是行内元素。PC 端浏览器支持情况较差。

京东自主研发推出DPG图片压缩技术，经测试 该技术，可直接节省用户近50%的浏览流量， 极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼 容支持，经过内部和外部上万张图片的人眼浏 览测试后发现，压缩后的图片和webp的清晰度 对比没有差距。不占标准文档流 中间的搜索宽度就跟父元素一样，此时我们设置它的外边距，这样它就会随浏览器的大小变化而变化。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局，就是百分比布局，也称非固定像素布局。

CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding 也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了。传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding。PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型。Normalize.css：修复了浏览器的bug。Normalize.css：是模块化的。传统or CSS3盒子模型？

通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。1. 单独制作移动端页面（主流） 京东商城手机版 淘宝触屏版 苏宁易购手机版 ....，通过判断屏幕宽度来改变样式，以适应不同终端。缺点：制作麻烦， 需要花很大精力去调。现在市场常见的移动端开发有 单独制作移动端页面 和 响应式页面 两种方案。2. 响应式页面兼容移动端（其次） 三星手机官网 ....现在市场主流的选择还是单独制作移动端页面。

就是原先用50*50放到移动端会放大，变的模糊，但是如果我们采用100*100然后压缩成50*50，在放到移动端又变成了100*100实际上并没有变化，但是实际没有模糊。Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。物理像素比就是屏幕的分辨率，分辨率越高，显示越清楚，750* 1334就是横的有750的像素点，竖的有1334的像素点。一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。背景图片 注意缩放问题。

视口就是浏览器显示页面内容的屏幕区域视口分为布局视口、视觉视口和理想视口我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽想要理想视口，我们需要给我们的移动端页面添加 meta视口标签。

移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要针对手机端开发现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试。