手机上网的特点 手机屏幕一般在240 * 320以上的称之为大屏幕手机 因为收的CPU频率低，不能像电脑一样快的浏览。做手机网站的时候像JS等要少用。 上网速度慢，联通的3G网络还可以。...2.图片要少用，尽量用汉字，在高昂的网络资费中，有的用户会把图片的显示禁止了。以减免流量。 3.网站尽可能的小点，页面太长则不适用浏览，用户体验不好，太宽手机打开显示不全，或者显示不工整。...在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。...，既不进行缩放，也不显示横下滚动条 · 少数手机在打开超过20k的测试页面时，会显示内存不足 开发中你需要注意的问题 · 手机网页编码需要遵循什么规范？...假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。
2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建立移动网站，单独设计一个布局...因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调...改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。...响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，...——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。
这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。...缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调 栅格化布局 将网页宽度人为的划分成均等的长度...改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。 ...同自适应布局一样，在书写 CSS 样式时，元素宽度不能使用绝对宽度，而要使用相对大小。 Media Queries 是响应式设计的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。...自适应对页面的屏幕适配实在一定的范围，比如：pc 端 > 1024px; 平板 768 ~ 1024px; 手机端 < 768px; 响应式是一套页面同时兼容在 pc 端、平板和手机端的各个不同视口，而不是为每个终端做一个特定的版本
手机浏览器是把页面放在一个虚拟的窗口(viewport)中，通常这个虚拟的窗口比屏幕宽，这样就不用把网页挤到很小的窗口中，用户可以通过平移和缩放来看网页的不同部分。...比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。...总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说...第一：如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。...比如一个分辨率为320x480的手机理想viewport的宽度是320px，而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢
所以说，移动端web开发面临的最大问题就是就是多屏适配，这是一个设计师、开发和测试都要面临的问题，如何做到在不同分辨率，不同屏幕密度上的手机上，同样大小的UI元素，看起来是一样大的。...物理像素(px，physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。...布局视口的宽度一般在768px~1024px（由浏览器厂商设置），常见宽度980px，这样，小屏的移动设备能够一次性完全显示桌面端页面，避免了浏览器出现横向滚动条。...既然viewport可以自动缩放页面，那么为什么不制作固定尺寸的页面，让浏览器自己去缩放呢？开发和设计都省事了！...通过设备宽度范围区间这样的媒体查询来动态改变rem基准值，其实不够精确，比如：宽度为375px 和 宽度为321px的手机，因为屏宽在同一范围区间内(320< width <375px)，所以会被同等对待
在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。...也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条...比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。...总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说...比如一个分辨率为320x480的手机理想viewport的宽度是320px，而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢
img{ max-height: 100% } 设计点三：重新布局，显示与隐藏 当页面达到手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想。...关于响应式设计的思考： 根据响应式设计的理念，一个页面包含所有设备不同屏幕的样式和图片，当一个移动设备访问一个响应式的页面，就会下载pc，笔记本，ipad等不同设备对应的样式。...border：0.5px；（错误），仅仅ios8可以使用 通用方案：scaleY（0.5） （3） 相对单位rem 为了适应各大屏幕的手机，px略显固定，不能根据尺寸的大小而改变，使用相对单位更能体验页面兼容性...对象数组 changeTouches：上次触摸改变的touch对象数组 一个小BUG： android只会触发一次touchstart，一次touchmove，touchend不触发。...但注意：event.preventDefault（）会导致默认行为不发生，如scroll，导致页面不滚动！如果页面带有滚动条，就需要考虑更换解决方案。
Q此处插入一个问题： 浏览器中，对页面进行放大的时候，视口的大小如何变化？ 2.1 viewport 的缩放与平移 回答上面的问题，视口会变小。...如果浏览器和针对 PC 制作的网页都不做任何处理，那么在窄屏设备上加载网页，我们看到的效果便是默认显示网页的左上角部分，然后通过水平和竖直方向的滚动来浏览网页的其他部分。...按照 2.1 里的 viewport 的解释，如此的设计，会把逻辑层画布中 980px 的图像投影显示到 320px 的屏幕上，看到的效果便是一个挤在一起看不清楚细节的缩小版页面。 ?...大家常说的两倍屏、三倍屏，这里面的倍数指的就是 dpr。 ●Web 开发中操作的 px，指的是逻辑像素。由于现代手机屏幕物理发光点的排布越来越密集，逻辑上的 1px 也并非对应屏幕上的 1 个发光点。...以 iPhone6s 举例，59mm 的屏幕宽度上排布了 750 个发光点，如果 dpr 为 1，那换算下来，PC 视觉上比较舒服的 14px 宽的字体，在手机上显示的物理宽度为 59/750*14=1.1mm
，不管viewport的宽度如何，始终保持相同的宽度。...如果页面延伸超过视口的高度——滚动条出现——视窗的宽度将会大于html元素的宽度。 因此，如果你将一个元素设置为100vw,这个元素将会延伸到html和body元素范围之外。...占满高度的元素:vh > % 在另一方面，当使一个元素跨越整个页面的高度时，vh远比百分比单位好。...然而，用vh的话，就像下面写的那么简单： .example { height: 100vh; } 不管.example元素如何嵌套，它还是能够相对于视窗尺寸设置大小。...滚动条的问题也不是一个问题，因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片，不管设备的大小。
5. rel=”apple-touch-icon” 解释：在iPhone, iPad上的safari浏览器中有个将网站添加到主屏幕上的按钮，当网站设置了rel=”apple-touch-icon属性...，当网站添加到屏幕上，屏幕上会显示网站的图标点击此处查看详细解释 6....在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式... *解释：使用制作搜索框，当在手机上点击搜索框时会弹出一个软键盘，软键盘上的enter按钮会以搜索按钮的形式显示 27... 解释：Pragme用于定义页面缓存，其中no-cache表示不缓存页面点击此处查看详细介绍 31.
在 iPhone4使用的视网膜屏幕中，把 2x2个像素当 1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。 ?...但是 CSS像素是很容易被改变的，当用户对浏览器进行了放大， CSS像素会被放大，这时一个 CSS像素会跨越更多的物理像素。 页面的缩放系数=CSS像素/设备独立像素。...在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。...当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。...为了适配这些手机，安全区域这个概念变诞生了：安全区域就是一个不受上面三个效果的可视窗口范围。 为了保证页面的显示效果，我们必须把页面限制在安全范围内，但是不影响整体效果。
PPI设备上的显示大小不一样。...如下图，假设你设计了一个163x163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是1x1寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5x0.5寸大小了。...所以，我们如何处理在不同 pt/px 比例上使得显示相同大小的图片呢？ 很简单，在美工设计图片的时候，多设计几种尺寸的图片。...但是由于我们手机的屏幕很小，而 viewport 的值却很大，所以页面所有的内容就会缩小以适应屏幕，所以用手机看起来，这些字体和图片就会特别小，这就像手机设置里面有个电脑版显示一样。...四、屏幕适配 经过分析我们得到，移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置 来进行控制，并改变浏览器默认的layout
; 屏幕可用工作区宽度：window.screen.availWidth; scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度...） clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。...offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。...，当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。...相对文档的水平座标 event.clientY 相对文档的垂直座标 clientWidth:是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
在说分辨率的时候我们常常会把大的值说在前面，所以在PC端屏幕宽度比高度的值要大一点，第一个值一般是指的宽度第二个值为高度。 移动端正好相反，手机一般宽度都是小于高度，所以第一个值是宽度。...PC端页面在手机上显示效果 苹果首先在浏览器上引入了视口的功能，随后各大浏览器都跟随实现。 视口（viewport）是用户网页的可视区域，也可称之为视区。...上例中：就像把屏幕分成320份。...： 第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容； 第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px...看一图就明了： 普通屏幕 两倍屏 视觉视口：当页面手动放大的时候，用户可以看到的网页内容减少，视觉视口的尺寸变小。反之，同理不赘述。
在说分辨率的时候我们常常会把大的值说在前面，所以在PC端屏幕宽度比高度的值要大一点，第一个值一般是指的宽度第二个值为高度。 移动端正好相反，手机一般宽度都是小于高度，所以第一个值是宽度。...PC端页面在手机上显示效果 苹果首先在浏览器上引入了视口的功能，随后各大浏览器都跟随实现。 视口（viewport）是用户网页的可视区域，也可称之为视区。...上例中：就像把屏幕分成320份。...： 第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容； 第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px...视觉视口：当页面手动放大的时候，用户可以看到的网页内容减少，视觉视口的尺寸变小。反之，同理不赘述。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
