准备远程调试chrome浏览器设置打开chrome://在chrome浏览器中检查手机设置打开开发者模式打开USB调试模式打开手机chrome浏览器基础窗口(viewport)window指浏览器可以显示的区域内容。设备无关像素值（DIPs）浏览器不针对物理硬件的像素宽度工作，而是根据DIPs宽度工作。DIPs（deviceindependentpixels），与设备无关的像素值。DIP将像素值与实际距离相关联。无论显示器的像素密度如何，相同的DIP值都代表屏幕上相同的空间量。字体改进机制当在屏幕较小的移动设备上显示网页时，浏览器会启用字体改进机制以使内容看起来更好。浏览器将尝试挑选出页面顶部的内容并将它们放大。这意味着有些字体会变大，这样更容易阅读，而另一些字体会保持不变的小，非常难以阅读。Pixelratio(DPR)DPR（设备像素比），设备像素比。DPR=hardwarepixels/DIPs，即设备像素比=物理像素/相对像素。请记住，像素比率是一维数字比率，而不是二维数字比率。各图所代表的DRP计算如下：其中每个蓝色方格代表一个物理像素，橙色方块代表一个相对像素。答：1张图片，一个实际像素代表一个相对像素，DPR=1；2张图片，每行两个实际像素代表一个相对像素，DPR=2；3张图片，三个实际像素代表一个相对像素，DPR=3；4张图片，一个又二分之一实际像素代表一个相对像素，DPR=1.5；使用响应式思维设置窗口在head元素中加入viewport标签可以让浏览器知道我们的意图。我们需要在视口值后面设置页面宽度，以引导页面针对特定设备调整宽度，从而使页面能够匹配不同的屏幕尺寸。初始缩放设置为1，使浏览器相关像素与CSS像素的比例为一比一。如果初始缩放比例不设置为1，一些浏览器在切换到横向模式时仍会保持之前的页面宽度，其内容只是缩放，而不能自动调整布局。element_max_width设置元素的最大宽度以防止溢出。CSSimg,embed,object,video{max-width:100%;}点击目标尺寸我们的手指大约有10mm宽，大致等于40px的CSS像素。所以，按钮至少应该是40*40px，但是与其弄那么大，不如将它设置为48*48px。这样可以确保元素之间有足够的距离，手指较粗的人也可以毫无障碍地使用它。一些点击目标可以做得更小，但要确保任意两个点击目标之间至少有40px的距离，这将防止用户同时点击两个按钮或根本看不到按钮。从小处着手，从最小的屏幕开始设计，我们要仔细权衡对用户来说最重要的信息，用户最想做的事情是什么，或者用户最想看的是什么屏幕上？如果您在最大屏幕上进行设计，一些重要信息可能很容易被删除。而是明确内容的优先级，然后从小到大进行设计，最重要的内容永远留在页面上。无论用户使用何种设备，都可以获得最完整的体验。例如，在销售硬件的商店设计中，优先信息是最近商店的地址、营业时间和联系方式。将这些信息放在页面顶部可以让我更清楚地看到它。除了从小到大的设计，写代码最好是从小到大，这样你就可以知道主要的风格和布局是否兼容任何设备，甚至是不支持媒体查询的古老浏览器。但最好的理由是性能。如果你从最小的设备开始，你必须从一开始就考虑性能。我们需要做出一些有意识的决定来确定内容的优先级以及向用户提供多少信息。构建添加媒体查询链接标签添加@mediatagembed@mediascreenand(min-width:500px){body{背景：蓝色；}}@import标签嵌入@importurl("no.css")仅屏幕和(min-width:500px);/*@importshouldbeavoidedforperformancereasons*/breakpointelasticcommonresponsemode序号模式的选择schema图1mostlyfluidmodel（多数流体）2dropcolumnmodel（列下降）3activelayoutmodel（布局移位器）4canvasoverflowmodel(offcanvas)有时一个网页会同时结合几种模式，比如dropcolumns和canvasoverflowmodels。模式——落柱模型首先要介绍的落柱可能是最简单的。当视口最窄时，每个元素都垂直堆叠，一个接一个。随着视口变宽，元素随之扩展，直到到达第一个不连续点。在第一个不连续处，所有元素不再垂直堆叠，而是前两个元素并排显示，第三个元素在它们下方。这些元素会随着视口继续拉伸，直到到达下一个不连续点。然后，它们被重新排列成三列布局。通常，当视口达到其最大宽度时，列也达到其最大宽度。然后，他们不使用视口进行拉伸，而是在两侧添加边距。代码示例：HTML
