关键词：
一、调试工具介绍（Chrome Emulation）
1.Device（设备相关）
自定义尺寸、Network（网络模拟）、UseAgent（浏览器信息）、缩放
2.Media（媒体）
3.Network（网络模拟）
4.Senors（传感器）
经纬度、陀螺仪
二、本地服务器搭建
1.搭建服务器 || HBuilder
2.同一网络下用设备连接
*关闭防火墙
三、像素比
1.点 point（抽象单位）
2.像素渲染（栅格化）
3.物理像素（调整大小）
4.dpi、ppi
5.获取像素比（window.devicePixelRatio）
四、viewport（视口）
1.width 设备宽度[pixel_value | device-width]
2.user-scalable 是否允许缩放（no || yes）
3.initial-scale 初始比例
4.minimum-scale 允许缩放的最小比例
5.maximum-scale 允许缩放的最大比例
6.target-densitydpi （已淘汰）
7.动态控制比例 1/像素比
五、前期准备
1.布局单位介绍选择
2.默认样式处理
-webkit-tap-highlight-color:transparent;
input{-webkit-appearance:none;}/*去除input默认样式*/
3.框架搭建
4.横竖屏适配
getBoundingClientRect().width
resize.orientationchange
六、媒体查询
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech ‘听觉’类似的媒体类型
tty 不适用像素的设备
tv 电视
七、媒体特征
min-width 分辨率宽度大于等于设备值得时候识别
max-width 分辨率宽度小于等于设备值的时候识别
orientation:portraint 竖屏
orientation:landscape 横屏
-webkit-min-device-pixel-radio:2 像素比
八、关键字
and 和、与（连接媒体特性）
not 排除指定媒体类型
only 指定某种特定的媒体类型（很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备）
九、样式引用
外联样式表 link[media="all and (min-width:600px)"]
@import @import url(index.css)all and (min-width:600px)
十、常规尺寸
@media all and (min-width:1200px){//大分辨率（PC分辨率、TV）}
@media all and (min-width:850px) and (max-width:1199px){//中等分辨率（PC小分辨率 || pad）}
@media all and (min-width:700px) and (max-width:849px){//pad分辨率}
@media all and (min-width:480px) and (max-width:699px){//高分辨率手机设备 || 低分辨率平板}
@media all and (max-width:479px){//手机设备}
补充：
一、移动开发需求
1.让页面的宽度跟访问设备的宽度一致 device-width
2.不让用户进行页面缩放 user-scalable = no
3.控制像素比
（如何让1px做1px的事情？a 1:1像素还原 b 尽可能的和设备分辨率一致）
通过JS控制像素比：
<script>
//获取像素比
var pixelRatio = 1/window.devicePixelRatio;
//通过JS动态设置视口（viewport）
document.write(‘<meta name = "viewport" content = "width = device-width,initial-scale = ‘+pixelRatio+‘,minimum-scale = ‘+pixelRatio+‘"/>‘)
</script>
二、移动布局步骤
1.确定尺寸（设计稿）并且还得再符合该尺寸的模拟器下进行第一次预览
2.搭建大体框架
三、单位对比
px 绝对（固定）单位
缺点：任何情况下都是固定值，会导致布局在不同尺寸的设备下错位
% 相对单位（会有影响发生变化）相对于父级（自身）大小进行计算
缺点：能确定范围的还是比较好计算的，对于不太好确定值的地方不好使用百分比，并且会导致变形
em 相对单位（会有影响发生变化）em=当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦
rem r=root em=字体大小font size 相对单位 只依赖HTML字体大小
四、动态设置字体大小
<script>
//条件：尺寸越大，则字体越大，尺寸越小，则字体越小
//获取html节点
var html = document.getElementByTagName(‘html‘[0]);
//获取屏幕宽度
var pageWidth = html.getBoundingClientRect().width;
//屏幕宽度/固定数值=基准值
html.style.fontsize = pageWidth/10 + ‘px‘;
</script>
移动端固定定位的方法：
html{width:100%;height:100%;overflow:hidden;}
body{width:100%;height:100%;overflow:auto;}
需要定位的元素使用position:absolute;top:0;left:0;
移动端和pc端，响应式设计布局
1.什么是响应式Web设计?响应式Web设计让你的网页能在所有设备上有好显示。响应式Web设计只使用HTML和CSS。响应式Web设计不是一个程序或Javascript脚本。2.响应式的作用：设计最好的用户体验 友好的用户体验是网页可以在任何... 查看详情
响应式布局和移动端开发
...而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。l 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的设计师采用... 查看详情
css-移动端响应式布局详解
背景移动端响应式布局开发主要方案有：基于rem开发基于媒体查询基于弹性盒基础概念在讨论响应式布局知识前，先了解下移动端常用基础概念。逻辑像素(CSSpixels)浏览器使用的抽象单位，主要用来在网页上绘制内容；通常在我... 查看详情
移动端响应式布局
<script>varpixclPation=1/window.devicePixelRation;document.write(‘<metaname="viewport"content="width=device-width,initial-scale=‘+pixelRatio+‘,minimum-scale=‘+pixelRatio+‘,maximum-scale=‘+pix 查看详情
0075移动开发选择和技术解决方案：单独响应式normalize.cssborder-box移动端特殊样式
4.1移动端主流方案1.单独制作移动端页面（主流）通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。也就是说，PC端和移动端为两套网站，pc端是pc端的样式，移动端... 查看详情
腾讯课堂第一课
使用 vm.title获取值vm.title="我是其他值" 页面也会跟着变化 (可以在console里面敲页面也会变，vue的响应式)vm.$data.title这个写法也可以 第二个demo 查看详情
移动端响应式
一、css3的@media媒体查询1、定义和使用 @media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要开发响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的... 查看详情
移动端响应式布局，rem动态更新
(function() varfontSizeMatchDeviceWidth=function() vardeviceWidth=document.documentElement.clientWidth||window.screen.width||320, devicePixelRatio=window.devicePixelRatio||1, fontSize=(Math.cei 查看详情
基于rem的移动端响应式适配方案(详解)移动端h5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解)： https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html 查看详情
移动端响应式(代码片段)
一、css3的@media媒体查询1、定义和使用 @media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要开发响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的... 查看详情
移动端h5---问题详谈
一、前言 昨天唠叨了哈没用的，今天说点有用的把。先说一下响应式布局吧，我一直认为响应式布局的分项目，一下布局简单得项目做响应式还是可以可以得。例如博客、后台管理系统等。但是有些会认为... 查看详情
移动端h5页面设计
参考技术A1、为什么要做移动端H5页面？响应式页面为了适应不同的终端设备而产生，体验较好，可以自动识别屏幕宽度以改变布局形式。但是不是所有的网站都适合做成响应式，如淘宝等一些大型网站做响应式开发难度大，响... 查看详情
移动端web开发响应式布局及bootstrap框架使用(代码片段)
文章目录响应式开发BootstrapBootstrap栅格系统响应式开发响应式开发原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。响应式布局容器：响应式需要一个父级做为布局容器... 查看详情
第126天：移动端-原生实现响应式模态框
下面采用HTML+CSS+JavaScript实现模态框，并采用Flex布局和多媒体查询实现响应式。一、模态框HTML代码1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>模态框实现</title>6<linkrel="styleshe 查看详情
移动端响应式布局+rem+calc()
1.媒体查询：@mediaonlyscreenand(max-width:) {},在最初做pc端时，使用各种媒体查询，因为pc的屏幕分辨率总共就几种，不嫌麻烦的重复使用类名。有很大的缺陷就是UI给的设计稿宽度是一定的，在做响应式式凭借自己的感觉是一种超... 查看详情
第33章项目实战-兼容式响应布局1
...成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用响应式设计了。一．响应式初探在前面的两个项目中，我们分别设计了PC端固定布局和移动端流体布局的案例。其实，... 查看详情
第33章项目实战-兼容式响应布局2
...成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用响应式设计了。一．搜索响应式在PC端，我们将搜索的文本框和按钮至于大背景前，移动端我们直接放在了大图片的下... 查看详情
php走进php第一课php介绍&环境安装(代码片段)
【PHP】✔️走进PHP✔️第一课PHP介绍&环境安装概述PHPPHP下载PhpStorm安装环境配置概述从今天开始,小白我将带领大家一起来学习一下PHP的基础知识.PHPPHP(HypertextPreprocessor)超文本预处理器,是一种被广泛运用的脚本语言.PHP适用于We... 查看详情