记录－交流－Web开发知识分享
如今，几乎每个新客户都想要他们网站的移动版本。毕竟它实际上是必不可少的：一种设计用于黑莓，另一种用于 iPhone、iPad、上网本、Kindle——所有屏幕分辨率也必须兼容。在接下来的五年中，我们可能需要设计一些额外的发明。疯狂何时停止？当然不会。
在网页设计和开发领域，我们很快就无法跟上无穷无尽的新分辨率和设备。对于许多网站来说，为每个分辨率和新设备创建一个网站版本是不可能的，或者至少是不切实际的。我们是否应该仅仅为了从另一台设备上获得访问者而承受从一台设备上失去访问者的后果？或者还有其他选择吗？…
随着越来越多的移动设备访问互联网，仅仅在计算机屏幕上看起来不错的静态网站设计已经不够了。
更不用说，在进行设计时，您还必须考虑平板电脑、二合一笔记本电脑以及具有不同屏幕尺寸的不同智能手机型号。
厌倦了滚动？下载 PDF 版本，以便于离线阅读和与同事共享。
因此，将您的内容拍打成一列并称之为退出并不会削减它。
通过响应式网页设计，您可以确保您的网站在手机、平板电脑、笔记本电脑和台式机屏幕上看起来最好。
用户体验的改善意味着更高的转化率和业务增长。
本指南将为您提供有关响应式网站设计的所有信息，包括定义、分步演练、示例等。
使用移动设备上网的情况持续以天文数字般的速度增长，而这些设备通常受到屏幕显示尺寸的限制，因而需要采用不同的方法来布局屏幕上的内容。
响应式网页设计最初由 Ethan Marcotte 在《A List Apart》中进行了定义，响应了用户及他们所使用设备的需求。布局会根据设备的尺寸和功能而变化。例如，用户会在手机上看到以单列视图显示的内容，而平板电脑可能会采用两列视图来显示相同的内容。…
2.px:px是屏幕设备物理上能显示出的最小的一点。是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，css中的1px并不等于设备的1px。比如iphone3，分辨率是320 x 480。iphone4变成了640 x 960，但是iphone4的实际屏幕尺寸并没有变化。这时候的1个css像素就是等于两个物理像素。
3.rem:相对于html根元素的字体大小（font-size）来计算的长度单位，可以设置，默认16px
4.em:所有现代浏览器下，默认字体尺寸都是16px。这时,1em = 16px。em会继承父级尺寸，也是相对单位。
二、vw px rem之间的换算
1.我们假设psd的设计稿是以1920px为标准的。那么：
100vw = 1920px => 1vw =
在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素是和屏幕像素密度有关的。
1.Retina屏
所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。
Retina屏一般在苹果公司的产品上用的比较多，诸如MacBook、iPad、iPhone等
以MacBook Pro with Retina Display为例，工作时显卡渲染出2880x1800个像素，其中每四个像素一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍，但对于特殊元素，如视频与图像，则以一个图片像素对应一个屏幕像素的方式显示。故不会产生Windows中分辨率提升使屏幕文字与图像变小，造成阅读困难的问题。这样在设计软件时只需将所有的UI元素的精细度都提高到原来的4倍就可以既保持了观看舒适度，又提高了显示效果。关于iOS设备，也由四个像素代替原来一个像素，通过下图对比就可以较明显地观察到这种关系
2.物理像素(physical pixel)
物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在二倍Retina屏幕下，1个CSS像素对应的却是4个物理像素（参照上面Retina屏的原理下文田字示意图理解）。
3.设备独立像素(device-independent pixel)
设备独立像素是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。
4.设备像素比(device pixel ratio)
设备像素比简称为dpr，物理像素与设备独立像素的比例。
移动端屏幕大小不一，要使网页能自适应不同尺寸的手机屏幕，而且还要尽可能开发便捷，目前使用最多的还是rem大法，相对比较成熟，而新兴的vw方案也可以一试。
本文主要介绍rem和vw两种方案的使用配置方式。…
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
早期网页设计采用静态布局，通过<meta>标签中的applicable-device应用设备标识识别移动设备，即<meta name = 'applicable-device' content = 'mobile'>，在<meta>标签中的viewport标签中设置width，通过js动态修改标签的initial-scale使得页面等比缩放，刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用px为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。
后面出现流式布局，使用百分比%定义宽度，高度使用
让我们看一下这段典型的 PHP 代码：
function names()
{
$data = Http::get('data.location/products')->json();
$names = [];
foreach ($data as $item){
$names[] = $item['name'];
}
return $names;
}
我们发送一个返回项目数组的 HTTP 请求，然后我们将每个项目的名称存储在一个$names数组中。…
近期评论