移动浏览器的问题 手机浏览器与桌面浏览器的最大不同就是屏幕尺寸。...平板设备如 ipad 以及传闻基于 webOs 的惠普产品将缩小桌面与手机的差距，但也无法改变最基本的问题。因为网站也需要在移动端显示，所以我们必须让它们在小屏幕上正常显示。...除了你是否应该这样做的问题之外，实际的问题是只有很少的网络公司会为移动单独设计网站。 手机浏览器的供应商希望为客户提供最好的用户体验，这意味着“尽可能如桌面显示的一样”。...这使得你的网站和在桌面浏览器中显示的一样。 布局视图有多宽呢？不同的浏览器各有差异。...缩放比例 你无法直接获得缩放比例，但是可以通过 screen.widt 和 window.innerWidth 的值求出来。当然只有两种属性都被支持时才有效。 幸运的是，缩放比例并不重要。
，使用不同的域名如wap.或m.。...2、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。...早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。...响应式和弹性布局之间的对比： 响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局...rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。
如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了...CSS像素:px(设备独立像素) 逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript...如此一来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了(这也解释了之前留下的一个问题，为啥视觉稿的画布大小要×2？)。...###屏幕尺寸### 屏幕尺寸：指屏幕的对角线的长度，单位是英寸。...maximum-scale – 允许用户缩放到的最大比例。
一、基础知识 1、屏幕 移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。...4、设备独立像素 随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（如iPhone3G/S为163PPI，iPhone4/S为326PPI），像素不再是统一的度量单位，这会造成同样尺寸的图像在不同...通过上面例子我们不难发现 pt 同px是有一个对应（比例）关系的，这个对应（比例）关系是操作系统确定并处理，目的是确保不同PPI屏幕所能显示的图像大小是一致的，通过 window.devicePixelRatio...所以，我们如何处理在不同 pt/px 比例上使得显示相同大小的图片呢？ 很简单，在美工设计图片的时候，多设计几种尺寸的图片。...，我们通过调整浏览器窗口可以改变 viewport 的大小，为了保证网页布局不发生错乱，需要给元素设定较大固定宽度。
劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如iphone系列）下会失真，且在非...思路二:通过终端判断分别调取两套资源以适配所有终端 优势：可根据不同端做个性设计及个性化信息推送且可按需加载，如移动端可配合重力感应、不同手势做各种炫酷拽效果，pc页面可不受流量限制做适合pc端的效果。...获取 该尺寸时动态设置 6.visual viewport 代表浏览器窗口的尺寸，当用户放大浏览器时这个尺寸就会变小 window.innerWidth 获取 7.ideal viewport 屏幕尺寸...设备屏幕的尺寸 单位是物理像素 screen.width 获取 屏幕尺寸是不变的 在该viewport中用户不需要缩放和横向滚动就可以正常查看网站的所有内容 设置移动端网站一般以这个viewport为准...,ideal viewport 的宽度等于设备屏幕宽度，使得无论在什么分辨率下，那些针对ideal viewport设计的网站都可以完美的呈现给用户。
开篇 确保图片在所有屏幕尺寸上都能良好显示是一项困难的任务，因为你需要考虑图片的大小、图片的放置位置、显示图片的比例、用户连接的速度等等众多因素。...结果是，大多数开发者只会为所有屏幕尺寸使用同一张图片，并让浏览器调整图片的大小以适应屏幕。这是一种不好的做法，因为浏览器仍会下载完整尺寸的图片（通常非常大），即使它只以其一部分尺寸显示。...在本文中，我将向您展示如何在您的网站上呈现响应式图片的所有方式。 img srcset 属性 到目前为止，实现响应式图片最简单的方法是在img标签上使用srcset属性。...picture 元素 到目前为止，我们主要讨论了如何以不同尺寸渲染相同的图像，以帮助提高加载时间，但这并没有涵盖在不同屏幕尺寸下显示不同图像的情况。...这意味着，如果您通过缩放或调整窗口大小来更改屏幕尺寸，它将切换到正确的图像。 sizes属性的工作方式类似，但只适用于增大屏幕尺寸的情况。
通过使用相对单位，设计师可以确保网站在不同设备和浏览器中以合适的字体大小显示[1]。 下面是正文： 在 Web 开发领域中，有很多误解流传，即使它们被反驳了很多次也仍然存在。"...px px 是像素的缩写……虽然现在大多数情况下它不再是一个真正的像素。在显示器通常是一个相对可预测的低分辨率像素比例，比如1024×768的时代， 1px 通常等于屏幕上的一个实际像素。...px 单位仍然与屏幕上像素的缩放值相关联。 em 和 rem 与文档的字体大小相关联，而不是页面的缩放或比例。...(zh-Hans) 所以，这里的总结是： 当用户更改字体大小时， px 值不会缩放。 em 和 rem 的值会随字体大小成比例调整。...也许我们有一定的间距，我们不希望在字体大小变大时变得更大。（如果默认情况下是一个大块的负空间，也许允许它缩放到更大的尺寸是没有意义的。）
A：在CSS3中加入了Media Queries模块（媒介查询)，是制作响应式布局的一个利器，使用这个工具我们可以非常方便快捷的制造出各种丰富的实用性强的界面；网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式...，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。...可以更精确作用于不同的媒体类型和同一媒体的不同条件，如min和max标识大于等于 和 小于等于。...height ： viewport的高度 initial-scale ： 初始的缩放比例 minimum-scale ： 允许用户缩放到的最小比例 maximum-scale ： 允许用户缩放到的最大比例...5) 响应式网站的设计流程 当产品经理提出产品功能移动化的需求时，通常的网站设计流程如下： 第一步：确定需要兼容的设备类型、屏幕尺寸。 第二步：制作线框原型。
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 开始 可以看一个响应式demo 一个强大的网站，可有界面帮助做布局，直接导出代码。...（线上保存功能是需要收费的） 基本的思路 图片自适应 去掉高度和宽度，只给一个max-width 固定宽度或高度，使图片按照自身比例缩放 固定宽度或高度，使图片按照自身比例缩放 使用容器的padding-top...，两套代码，很蛋疼 排版和布局 通过样式在多端呈现不同的效果 ，如栅栏来实现内容块的等比缩放、或流式布局里面内容依次排列下来 禁止缩放，避免如iphone上显示整个页面 <meta name="viewport...项目地址 一种新<em>的</em>图片格式 flashpix可以根据<em>浏览器</em>发出<em>的</em>请求返回合适<em>尺寸</em><em>的</em>图片 布局类 栅栏 这个业内有很好<em>的</em>实现，<em>如</em>bootstrap，很容易找到demo看。...流式布局 这种一般界面比较简单，百分比来控制，一般不够位置挤下来就是了 媒体查询 通过检测<em>屏幕</em><em>的</em>宽度，从而在<em>不同</em>宽度<em>下</em>通过<em>不同</em><em>的</em>样式来显示页面。比较方便。
但是这种写法费力不讨好，之前有的网站在PC和手机查看到的样式不一致，用了一些这个技术，但是后来很多都是检测到不同设备，就跳转到不同的网页上去了。...方式二：等比例缩放，界面的比例不会改变，不论设备的尺寸是什么都完全自适应。缺点是等比缩放，PC页面在手机端展示就会很小！...这种写法在写H5的时候比较实用，H5只是针对移动设备，移动设备不论分辨率怎么变，界面尺寸等比缩放的话，其实样式兼容性就解决了。...这种写法也可以用在PC端，有时候设计按照1080P设计，用户使用的时候放在小屏幕上看就出现很多样式改变或者被压缩换行，界面适配比较不好做的时候，也可以使用等比缩放。...} // 如果浏览器不支持addEventListener，则中止 if (!
html5和css3流行至今，我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习，浅显的理解就是根据屏幕分辨率的大小，网站布局、图片、文字大小等相应改变。...三个简单步骤，让你的网站变成响应式网站 ios和Android浏览器都基于Webkit核心。...这两种浏览器以及很多其他浏览器如chrome、opera，都支持用viewport meta元素覆盖默认的画布缩放设置，只需要在html的标签中插入一个标签。标签中可以设置具体的宽度或者缩放比例。...；initial-scale=2页面的缩放比例，设置比例为设备尺寸的2倍；maximum-scale=3,允许用户将页面最多放大至设备宽度的3倍；user-scalable=no禁止用户缩放。...粘贴下面的代码到和标签之间: 设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面
本文作者：IMWeb moonye 原文出处：IMWeb社区 未经同意，禁止转载 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。...（线上保存功能是需要收费的） 基本的思路 图片自适应 去掉高度和宽度，只给一个max-width 固定宽度或高度，使图片按照自身比例缩放 固定宽度或高度，使图片按照自身比例缩放 使用容器的padding-top...，两套代码，很蛋疼 排版和布局 通过样式在多端呈现不同的效果 ，如栅栏来实现内容块的等比缩放、或流式布局里面内容依次排列下来 禁止缩放，避免如iphone上显示整个页面 <meta name="...项目地址 一种新<em>的</em>图片格式 flashpix可以根据<em>浏览器</em>发出<em>的</em>请求返回合适<em>尺寸</em><em>的</em>图片 布局类 栅栏 这个业内有很好<em>的</em>实现，<em>如</em>bootstrap，很容易找到demo看。...流式布局 这种一般界面比较简单，百分比来控制，一般不够位置挤下来就是了 媒体查询 通过检测<em>屏幕</em><em>的</em>宽度，从而在<em>不同</em>宽度<em>下</em>通过<em>不同</em><em>的</em>样式来显示页面。比较方便。
但也产生了一个问题，移动端的浏览器同桌面端相比，就是字体过小，但是用户可以手动缩放。后期也产生了根据调整视口宽度（width）和缩放（scale）开发移动端的页面。...既然viewport可以自动缩放页面，那么为什么不制作固定尺寸的页面，让浏览器自己去缩放呢？开发和设计都省事了！...其中： width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 它的意思是说，页面宽度就是设备宽度，缩放比例100%，这时，无论你是多么高清的屏一个...css，如width，height，line-height，margin，padding等都以rem作为单位，这样页面在不同设备下就能保持一致的网页布局。...这里通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果，但是这样hack实在是不够通用(如：圆角等)，与这个元素相关的其他属性也要跟着调整，写起来实在麻烦。
利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。...用到的技术： CSS3@media查询 用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。...”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分...initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。...minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。
前端的一大工作内容就是去兼容页面在不同内核的浏览器，不同的设备，不同的分辨率下的行为，使页面的能正常工作在各种各样的宿主环境当中。...响应式界面的四个层次 同一页面在不同大小和比例上看起来都应该是舒适的； 同一页面在不同分辨率上看起来都应该是合理; 同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的； 同一页面在不同类型的设备...我们通常说的H5手机适配也就是指的这两个维度： 适配不同屏幕大小，也就是适配不同屏幕下的 CSS 像素 适配不同像素密度，也就是适配不同屏幕下 dpr 不一致导致的一些问题 适配不同屏幕大小 适配不同屏幕大小...屏幕提供最适合的图片尺寸 本文重点关注如何在不同的 dpr 屏幕下，让图片看起来都不失真。...现代浏览器，提供了更好的方式，让我们能够根据设备 dpr 的不同，提供不同尺寸的图片。
前端适配方案 前端的适配方案大致分为四种：1，根据 meta 按比例缩放；2，根据页面宽度百分比适应；3，基于媒体查询的响应式方案；4，REM缩放方案。...1，根据 meta 按比例缩放 这种方案的实现更偏技术，大致原理是根据 设备的分辨率及像素比 等信息，计算出页面的缩放（scale）数值，来进行等比缩放。...效果：不同设备表现可能截然不同 场景：专题网站，小团队低成本开发 优点：不通设备可以发挥更多的想象力 缺点：要出多套设计，且内容可能需要取舍 4，REM缩放方案 REM 方案的原理跟 meta 方案非常相似...，只不过是更加粗暴地根据设备的宽度来调整缩放。...与 meta 方案不同的是，REM 方案并不是缩放整个页面，而是页面上所有的尺寸都是与根元素（html）的字体大小相关的，我们只是根据不同设备来调整根元素字体大小，则所有尺寸随之变化。
关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度。比如：iphone6/7是4.7寸，iphone6/7p是5.5寸。...手机尺寸 在这里可以查看大部分流行手机的屏幕尺寸：地址 1.2 屏幕分辨率 屏幕分辨率是指：屏幕的像素点数。...,也就是屏幕中的发光的点数(屏幕由很多个发光点组成，每个发光点可以显示不同的颜色，这些发光的点组成了屏幕)。...视口 问题：PC端设计的网页一般都是大于960px 尺寸，移动端上的浏览器为了能够将那些为PC端设计的网站正常显示，一般都给一个默认的整屏的宽度为980px（css像素），虽然能这样让移动端浏览器兼容大部分...，不需要缩放查看页面了,而且在不同尺寸下都能基本表现一致，此时的布局视口的状态我们就称为理想视口（ideal viewport）。
通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念 像素是计算机屏幕中显示特定颜色的最小区域。...# CSS 像素（CSS pixels） 是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。...根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。...# 视觉视口(visual viewport) 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。 理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
