整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前端开发中，比较重要的一个环节就是要适配各个屏幕的尺寸。
PC端比较简单的是响应式和自适应。响应式比较简单，通过Media查询页面宽度，再加载相应的样式即可。自适应就是用百分比，rem，vw这样的单位去做。
但是今天主要讲的是移动端的适配。从iphone4到iphone7P，3.5寸小屏到如今的5.5寸大屏，如何提供一套简单的适配方案呢？这里推荐一下手淘团队的方案--Flexable。
不同分辨率，不同尺寸的屏幕。首先普及一些基本概念：
物理像素：物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。
设备独立像素：设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。
css像素：CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。
屏幕密度：屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。
设备像素比：设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：
设备像素比 = 物理像素/设备独立像素。
众所周知，iPhone6的设备宽度和高度为375pt * 667pt，根据上面公式，我们可以很轻松得知其物理像素为750pt * 1334pt。在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。
了解了前面一些相关概念之后，接下来我们来看实际解决方案。在整个手淘团队，我们有一个名叫lib-flexable的库。可以百度搜索flexable下载这个库。之后就可以把库引用到你的项目中去了。
读到这里，大家应该都知道，我们接下来要做的事情，就是如何把视觉稿中的px转换成rem。
目前Flexible会将视觉稿分成100份，（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：1a=7.5px；1rem=75px。
这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。在实际生产当中，如果每一次计算px转换rem，或许会觉得非常麻烦，或许直接影响大家平时的开发效率。为了能让大家更快进行转换，我们团队内的同学各施所长，为px转换rem写了各式各样的小工具。CSSREM是一个CSS的px转rem值的Sublime Text3自动完成插件。
篇文章主要介绍下如何使网站自适应屏幕的大小。其实，这个问题并不是很难做，可以使用CSS来实现。
具体操作实例小编在下面已经写出来了：
<div id="change-color"></div>
css 代码如下：
#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}
这个很简单，大家都能想象出来是一个多么枯燥的页面，一个 300 × 300 像素的红色正方形在页面的中上部。学到这里的同学对于这样简单的代码应该是无压力的了。然后我们在这段 css 后面再加上一点内容，改做：
#change-color {
width:300px;
height:300px;
margin:50px auto;
background:red;
}
@media (max-width:800px){
#change-color {
width:90%;
height:300px;
margin:50px auto;
background:blue;
}
}
来一起看看这个css，这段可以分作两个部分，第一部分就是我们上面写的对 #change-color 定义的 css ，这个无需解释了。第二部分跟我们以前看到的不一样哈，但是如果去掉 @media (max-width:800px){……} 这样的结构之后，我们可以发现，剩下的内容也是对 #change-color 的定义，只是跟上面略有不同，一个是宽度发生了变化，一个是背景色改了。那么现在我们来解释一下这部分代码。
默认情况执行第一部分的定义，那么背景色就应该是红色的，宽度是300px。一切如同我们与想的一样。当浏览器内容部分的宽度小于等于800px（符合条件，最大宽度为800px）时，使用第二部分的定义，也就是宽度变成了90%，背景色变成了蓝色。
然后我们看看实际效果：当网页宽度大于800px，网页自适应宽屏。
调整窗口宽度到内容区域小于800px，网页适应屏幕窗口调整，这样现在效果实现了。
本篇属于畅想网络原创，转载地址：http://www.e-wkj.cn/xw/1824.html
有一个最佳的屏幕尺寸可以设计。网站应在不同的浏览器和平台上以所有屏幕分辨率快速响应地进行转换。无障碍。移动友好。首先为您的访客设计。从360×640到1920×1080的设计。
它仍然应该看起来不错，并且在所有尺寸下都可以正常工作，现在我们的建议是建设一个自适应/响应式网站。
针对特定屏幕尺寸优化页面布局的三个主要标准是：
可用性准则还建议您考虑所有大小的所有三个条件。检查浏览器窗口的屏幕分辨率为360×640到1920×1080。
在整个分辨率范围内，您的网页在所有条件上的得分都应该很高。
您的页面也应该以更大或更小的尺寸工作，尽管这种极端情况不那么重要。
尽管此类用户当然应该能够访问您的网站，但为他们提供小于设计的外观有时是可以接受的折衷方案。
2020年的前6个月中，对451,027个访客进行了访客分析：
屏幕分辨率测试用户数11920×108088,378（19.53％）21366×76867,912（15.01％）31440×90043,687（9.65％）41536×86432,872（7.26％）52560×144025,954（5.73％）61680×105020,068（4.43％）71280×72015,138（3.34％）81280×80014,007（3.09％）9360×64011,085（2.45％）101600×90010,193（2.25％）
响应式Web设计：在相同的URL上提供相同的HTML代码，而不管用户的设备（例如，台式机，平板电脑，移动设备，非可视浏览器）如何，但是可以根据屏幕大小来不同地呈现显示。 百度建议使用响应式Web设计，因为它是最容易实现和维护的设计模式。
在当今世界，许多人正在使用手持设备（平板电脑和智能手机）浏览网页，而响应式网站设计（RWD）已经成为解决屏幕尺寸挑战的极有可能的解决方案。
此方法不再使用固定宽度的网站，而是使用CSS样式表中的“媒体查询”来创建一个网站，该网站在大小上响应手持设备的不同视口以及人们使用的较小屏幕。
因此，无论人们使用什么设备来查看您的网站，您都可以为他们提供最完整的体验。
如果您想为高竞争力的关键词在百度获得高排名，您就需要一个适合移动设备的网站。
网站对移动设备的友好程度如何影响各种设备对网站的排名效果。如果您为小型企业创建网站，您会知道他们想要一个在百度自然搜索中表现良好的网站。
目前从本质上讲，这意味着网站设计具有响应性并且对移动设备友好，尤其是对于百度而言。
作为参考，以下是最近（2020年）记录的当前全球顶级屏幕分辨率的列表：
你不能。不可能将网站设计成在每个浏览器，平台和屏幕分辨率下看起来都一样，所以请避免尝试。
您可以选择不带表格的流畅布局来进行设计，其宽度百分比可以扩展和收缩以适合访问者浏览器的设置，或者您可以考虑研究能够实现相同效果的响应式设计解决方案。
搜索引擎偏爱响应式设计，这对于采用它的人来说是个好消息。移动技术正在兴起-因此，如果要开发一个新网站-您必须从一开始就考虑您的网站对移动设备的友好程度。
在实际编写代码时，我们的目标是使事情简单。从经验中我们知道的是， 对于您而言，确定您的受众及其使用的设备，并从整体上构建适合该受众的网站至关重要，受众也包括搜索引擎。
好吧，那不是理想的。实际上，它从未如此。
追溯到今天-一些人使用网站的纯文本版本为不支持其网站元素的用户/浏览器生成内容-试图（通常是徒劳的）使他们的内容更易于访问。
W3C甚至曾经推荐它，我们认为如果其他所有方法都失败了：
为访问者目的而向访问者传递一个URL始终是理想的选择，并且如果您正在考虑创建网站的“移动”版本，则在传递移动或智能手机内容时没有任何区别。
百度可能会在不久的将来对您的移动体验做出主要评价-因此，我们所有人都确实需要意识到我们可能很快会在百度的SERP中看到巨大的变化。
当百度作为“访问者”时，由于搜索引擎的典型URL挑战，通常只提供一个URL甚至更为重要-在前一段时间实施规范链接元素之前就是这种情况。
因此，理想的情况是始终提供一个URL。
百度在这方面给出了建议：“如果您具有“智能手机”内容（我们将其视为普通的Web内容，因为它通常是普通的HTML页面，只是在布局上进行了调整以显示较小的内容），则可以使用rel = canonical指向您的桌面版本。这有助于我们专注于网络搜索的桌面版本。当用户使用智能手机访问该桌面版本时，您可以将他们重定向到移动版本。无论URL结构如何，此方法均有效，因此您无需为智能手机移动网站使用子域/子目录。 然而，更好的方法是使用相同的URL并显示内容的适当版本而无需重定向。”
百度还提供了以下提示，以检查您的网站是否准备好使用移动优先索引，但是从本质上讲，如果您正在为网站使用响应式网页设计模板，则此更改的问题应该很小：
过去的网页用户通常不需要滚动，但多年来，这种情况已经改变。
因此，在设计时，应考虑如果用户只滚动一个完整屏幕或两个屏幕，可以看到多少内容。超过五个屏幕的长度可能表示您页面上的内容过多。当然，用户希望等待更短的时间来查看更全面的内容。
滚动和初始可见性显然都取决于屏幕尺寸：较大的屏幕在屏幕上方会显示更多内容，并且需要较少的滚动。
不一定，但是有可能。
与百度优化有关的许多事情–建立一个适合移动设备的网站或多或少可以确保您保持已经获得的访问量，并不一定能为您提供来自百度的更多免费访问量。
百度及其用户再次提高了质量标准，如果您想在更具竞争力的SERP中竞争，这是小企业克服困难的又一个障碍。
从长远来看，这种移动转化仅对您的用户来说是一件好事，但从短期来看，对小型企业的转化率不会产生什么影响，因为通过移动设备获得的转化率通常低于桌面。
百度表示，这种适用于移动设备的算法对SERP的影响更大，随着时间的流逝，我们将发现更多信息。
百度站长工具
您应该能够在百度站长工具中跟踪移动设备错误，并且如果您的网站配置正确，错误会随着时间的流逝而消失。
*请认真填写需求信息，我们会在24小时内与您取得联系。
