现在的位置: 主页 > 企业简介 > 文章正文

移动web开发笔记

作者:陕西芙爱尔婚庆礼仪服务有限公司 来源:www.fair521.com 未知发布时间:2017-09-05 12:15:03
移动web开发笔记 基础概念 像素单位 CSS pixels与device pixels CSS pixels

浏览器使用的抽象单位, 主要用来在网页上绘制内容。 device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度。 等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式:
1 CSS pixels = (devicePixelRatio)^2 device pixels
(^2是平方的意思,至于 devicePixelRatio是什么东西,后面会讲解) 。

PPI/DPI

PPI,有时也叫DPI,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。(注:这里的像素,指的是device pixels。)搞清楚了PPI是什么意思,我们就能很容易理解PPI的计算方式了,我们需要首先算出手机屏幕的对角线等效像素,然后处以对角线(我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度),就可以得到PPI了。准确的计算公示大家可以参照下图。比较有意思的是,根据公式计算出来的iPhone 4的PPI为330,要比苹果官方公布的326要高一点点。

devicePiexelRatio pixel - px ( picture element ) dpi / ppi - 每英寸像素 ( dot per inch ) dips - 设备独立像素 ( device-independent pixels ) devicePixelRatio - 物理像素 / dips 文字大小控制 px, rem 固定大小 - px 多屏适配,统一修改 - rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 rem - font size of the root element (W3C) viewport

在苹果的规范中,meta viewport 有6个属性,分别如下:
- width - viewport的宽度[pixel_value |device-width]
- height - viewport的高度[pixel_value |device-height]
- initial-scale - 初始的缩放比例[float_value]christer1229
- maximum-scale - 允许用户缩放到的最大比例
- minimum-scalbujue - 允许用户的最小缩放值
- user-scalable - 用户是否可以手动缩放 [yes | no]

响应式布局 原则 移动优先 渐进增强 实现方式 媒体查询 使用JS 使用第三方框架 布局方案 百分比布局(流体布局)

将元素原本的定宽除父容器的宽度得到百分比设置为宽度,使用百分比,文字使用 em。

优点:
流动布局页面对用户更友好,因为它能自适应用户的设置。
页面周围的空白区域在所有分辨率和浏览器下都是相同的,在视觉上更美观。
如果设计良好,流动布局可以避免在小分辨率下出现水平滚动条。 缺点:
设计者更难控制用户所见,并可能忽略掉一些错误,因为在特定的分辨率下看起来好的;
图片,视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户;
在特别大的分辨率下,内容会被拉成长长的一行,变得难以阅读;
会有画面失真问题 弹性(flexible)布局

用rem替代px
原理:定一个最大宽度,设备屏幕超过这个宽度之后,rem大小不再变化,否则,rem大小设置为屏幕宽度的几分之一,页面中的长度单位值用rem代替px,这样随着页面的宽度变化能够进行等比例缩放。
rem实际是页面根元素的字体大小,通过js改变rem值的代码如下:

; ( function( win ) ) { var doc = win.document; var docEl = doc.documentElement;//获取文档元素 var tid; function refreshRem() { var width = docEl.getBoundingClientRect().width;//获取设备宽度 if ( width > 540 ) { width = 540; } var rem = width / 10;//设置rem为屏幕宽度的十分之一 docEl.style.fontSize = rem + 'px'; } win.addEventListener('resize', function() {//屏幕宽度改变时 clearTimeout(tid);//清除之前的计时器 tid = setTimeout(refreshRem, 300);//300ms后改变rem大小 }, false); win.addEventLister('pageshow', function( e ) {//页面显示时 if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); refreshRem(); })( window ); flex-box布局

优点:布局方便,灵活性高;
缺点:兼容性问题;

图片处理 普通设置: img { max-width: 100%; }

或:

img { width: 100%; max-width: 300px; }//限制最宽不超过300px; 响应式图片:

即根据屏幕密度现实对应尺寸图片
src:指定资源(在浏览器不认识srcset和size时会加载这个)
srcset:srcset的值是可用图像版本的URL列表;每个图片的宽度都用w描述符来表明。
sizes:使用长度与媒体查询配合,浏览器会检测每一个媒体查询,直到匹配到为止。使用查询配合的长度作为“选择资源”拼图的最后一块:图像渲染宽度或者相对于视图。

媒体查询 可以通过 标签的media属性为样式表指定设备类型 //纵向屏幕 //宽度小于900px时 在css中同样可以使用 @media screen and (max-width: 960px){ body{ background: #000; } } @media (max-width: 960px){ body{ background: #000; } } @media screen and (min-width:960px) and (max-width:1200px){ body{ background:yellow; } } @import方法
@import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在标签中的中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。 @importurl(reset.css) screen; @importurl(print.css) print;

中的

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:黄冈SEO http://huanggang.4567w.com

上一篇:软文营销 带着您的企业向着美好奔跑 下一篇:最后一页