(1)PC端常见浏览器

360、谷歌、火狐、QQ、百度、搜狗、IE

(2)移动端常见浏览器

UC、QQ、欧朋Opera、百度手机、360安全、谷歌、搜狗、猎豹等

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

• 移动端设备屏幕尺寸非常多，碎片化严重
• 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640×960、640×1136、750×1334、等
• 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px

3、常见移动端屏幕尺寸

作为前端开发，不建议去纠结dp、dpi、pt、ppi等单位。

• 搭建本地web服务器，手机和服务器在同一局域网中，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题
• iOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

• 字面意思，是用户正在看到的网站的区域。注意：是网站的区域
• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

• 为了使网站在移动端有最理想的浏览和阅读宽度而设定
• 理想视口，对设备来讲，是最理想的视口尺寸
• 需要手动填写meta视口标签通知浏览器操作
• meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽

(2)响应式页面兼容移动端(其次)

通过判断屏幕宽度来改变样式，以适应不同终端。**缺点：**制作麻烦，需要花很大的精力去调兼容性问题。

五、移动端技术解决方案

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用H5标签和CSS3样式。

同时我们浏览器的私有前缀，我们只需要考虑添加webkit即可。

采取单独制作移动页面方案，采取flex布局。

1. 常见flex布局思路：先把主轴设置为y轴，然后沿着侧轴居中对齐。就可以实现图片和文字上下显示。

2. 元素同时设置flex:1;和display:flex;是不冲突的，既充当父元素又充当子元素。

rem单位：rem(root em)是一个相对单位，类似于em，em是父元素字体大小。

**rem的优势：**可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制。

• @media 可以针对不同的屏幕尺寸设置不同的样式

单独制作移动页面方案 + 采取rem适配布局(less+rem+媒体查询) + 设计图采用750px设计尺寸

1.common.less用于存放公共样式，设置常见的屏幕尺寸 修改里面的html文字大小。先默认给一个html文字大小，然后根据屏幕尺寸的不同，层叠掉该属性样式。

// 如果屏幕尺寸大于750px，直接限定好默认的html字体大小为50px，后续层叠掉该属性
// 划分份数定义为15

使用适配方案2制作苏宁首页demo

设置方法：打开vscode中设置首选项按钮，点击设置，在搜索框中搜索cssroot，然后手动将其修改为75px即可。注意是要修改工作区中的cssroot。

3.如果屏幕超过了750px 则按照750设计稿来显示，不会让页面超过750px

这里使用媒体查询来进行屏幕尺寸的测量，并使用important来提升权重。

利用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。

在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同页面布局和样式变化。

• 小屏幕：width: 750px; (比实际的屏幕尺寸小一些，是为了留白，视觉效果更好)

• 里面的li宽度修改为33.33%，这样每行只能显示3个li，剩余的换行显示

Bootstrap来着Twitter(推特)，是目前最受欢迎的前端框架，是基于HTML、CSS和JAVASCRIPT的，简单灵活，使得WEB开发更加快捷。

框架：就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断更新迭代
• 让开发更简单，提高了开发效率

目前使用最多的是v3.0版本的，稳定，但放弃了IE6-IE7。对IE8支持但界面效果不好，偏向于开发响应式布局、移动设备优先的WEB项目。

四部曲：1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容

2. • 可以直接将Bootstrap预先定义好的样式直接拿来使用

   • 修改Bootstrap原先的样式，但要注意权重问题

   • 学好Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好这个类，叫.container，它提供了两个该用处的类。

响应式布局的容器，固定宽度。和之前响应式布局中的参数设置相同。

• 流式布局容器 百分百宽度
• 适合于单独做移动端开发

栅格系统(grid systems)，也称为"网格系统"，它是将页面内容划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。里面的container宽度是固定的，但是不同屏幕下，container的宽度不同，再把container划分为12等份。

注意：这个虽然和rem有些相似，但rem是将整个window划分成几等份，而这里是将页面内容container盒子划分。

2.栅格系统的简单使用

栅格系统用于通过一系列的行(row)和列(column)的组合来创建页面布局，内容就可以放入这些创建好的布局中。

• 要实现列的平均划分 需要给列添加 类前缀

• 列column大于12，多余的列所在的元素将被作为一个整体另起一行排列

• 每列默认有左右15px的padding 如果不想要，则通过CSS强制去掉就可以了

  行row可以去除父容器左右15px的边距

• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6” 其中4和6表示份数

这里份数不一定要一样，只要保证总和是12份就可以。

• 如果孩子的份数相加为12，则孩子可以沾满整个container的宽度；
• 如果孩子的份数相加小于12 则占不满整个container宽度 会有空白；
• 如果孩子的份数相加大于12 则多余的列会另起一行显示。

为一列指定多个设备的类名，以便划分不同份数：

简单理解就是在列中再分为12等份，添加若干子元素。列嵌套最好加1个行，这样可以清除父元素15px的padding，且高度自动和父级一样高。

使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过*选择器为当前元素增加了左侧的边距(margin)

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

有隐藏，也有显示，显示就使用visible-*，可以针对不同设备显示元素。

• 单独制作移动端页面(主流)

• 流式布局(百分比布局)
• rem适配布局(推荐)

番外：vw和vh 未来趋势

但是不能用于pc端！！只能用于移动端

• vw/vh是一个相对单位(类似于em和rem相对单位)

• 相对视口的尺寸计算结果

注意：和百分比是有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的。

元素单位直接使用新单位vw/vh即可。因为是相对单位，所以不同视口(屏幕)下，宽高一起变化完成适配。

• 前提：设计稿按照iPhone6/7/8来设计，有个盒子是50px*50px的，如何使用vw？

• 开发中使用vw，需要将模式改为2×模式
• 因为涉及到大量除法，所以搭配LESS更好
• 本质是根据视口宽度来等比例缩放页面元素的宽高基本就够了，vh很少使用
• 兼容性：兼容性问题可以查看这个网站：