web知识零零散散的知道一些，但总感觉不够系统，遇到问题不知道如何解决，因此特此来系统的学习一下web前端的知识。从慕课网的web基础看起。下面学习http://www.imooc.com/learn/494。

1 web基础知识

1.1 pixel移动开发像素知识

  • px:css pixels逻辑像素，浏览器使用的抽象单位
  • dp,pt:device independent pixels设备无关像素
  • dpr：devicePixelRatio设备像素缩放比

计算公式： 1px = (dpr)2*dp

为什么iphone5是320px*568px？-》

因为dpr=2,即 1px=4dp，对应到长度（纬度），边长为2的正方形，长度1px=2dp.那么iphone5d 640*1136对应到px单位就是：320*568
  • DPI:打印机每英寸可以喷的墨汁点（印刷行业）
  • PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度

目前，在计算机显示设备参数描述上，二者表达的是一样的。

计算公式：ppi = √(11362+6402)/4=326ppi(视网膜Retina屏)。注意：单位为硬件像素，非px.

可视度越低，系统默认设置缩放比越大。

Retina屏（高清屏）：dpr都是大于等于2

手机端web学习基础--from慕课网的更多相关文章

  1. 利用firefox调试安卓手机端web

    分2部分: 手机: 1.安装最新版firefox 2.打开浏览器,输入about:config 3.设置 devtools.debugger.remote-enabled 值为true devtool ...

  2. HTML学习案例-仿慕课网网页制作（二）

    制作部分:网页footer部分 制作效果: 涉及知识:link部分要复习: dl- definition list dt- definition title dd - definition descr ...

  3. bootstrap学习记录（慕课网教程）

    1.当主标题下需要副标题时可在h中嵌套small<h1>nihao<small>a</samll></h1> 2.当某一段落需要突出显示时可添加lead ...

  4. WEB学习-基础知识：列表、表单、div和span、注释、字符实体、HTML废弃标签介绍

    列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...

  5. HTML学习案例-仿慕课网网页制作（一）

    概述:仿制慕课网头部导航栏和分支导航栏的外观 考察知识点: 1.消除浮动的原因:如果最上面的块级元素不清楚浮动的话就会影响下面的块级元素的布局 对subnav块使用了float,结果subnav块飞到 ...

  6. 手机端开发，基础设置1-body-fontsize

    一.设计稿设计大小按照750设计. 二.单位使用rem,相对于body  fontsize 相对大小计算. 三.假设750下,body fontsize 为100,为了方便计算. 四.通过设置当前设备 ...

  7. 手机端web(iPad)页面自适应js

    有关编写手机页面(ipad页面)自适应的方法有很多,比如:bootstrap,rem等等.下面分享给大家一个js控制viewPort视区自适应缩放的方法(我给它命名为phone.js): 将phone ...

  8. 手机端web网页布局经验总结（持续更新中）

    1. 首先,在网页代码的头部,加入一行viewport元标签,我们一般是不让用户手动的去改变页面的大小的. <meta name="viewport" content=&qu ...

  9. 【小尝试】Java获取慕课网原有路径课程列表

    作为一个老慕课网(https://www.imooc.com/)粉丝,还记得最开始的慕课网有很多免费的路径课程,练习什么的也特别详细,是入门一门语言的好方法. 现在慕课网发展起来了收费模式,添加了很多 ...

随机推荐

  1. pivotx的entry和page内容里的日期格式修改

    欢迎转载opendevkit文章, 文章原始地址: http://www.opendevkit.com/?e=63 1. 文章发布时间的确定 如果服务器空间在国内还好说, 如果在国外的话, 文章编辑时 ...

  2. 谈谈eclipse使用技巧一

    俗话说的好啊,“工于利启事,必先善其器”,如果说你的编程功底是一个枪法的话,那么强大的eclipse就是android战士们最好的武器. 这里,我们来总结eclipse的使用技巧,从而使我们的编程达到 ...

  3. C# 调用restful服务开源库

    .NET环境下我们想调用其它开放平台的服务接口,不需要自己去实现底层,开源的库用起来会很方便 hammock http://www.cnblogs.com/shanyou/archive/2012/0 ...

  4. 深入理解openstack网络架构(2)----Basic Use Cases

    原文地址: https://blogs.oracle.com/ronen/entry/diving_into_openstack_network_architecture1 译文转自: http:// ...

  5. python post

    使用python 提交表单包括图片以及参数信息,详见代码 # -*- coding: utf-8 -*- import MultipartPostHandler, urllib2, cookielib ...

  6. 【腾讯Bugly干货分享】揭秘：微信是如何用libco支撑8亿用户的

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58203cfcd149ba305c5ccf85 作者:Leiffy 导语 lib ...

  7. objective-c（接口&实现）

    objective-c在xcode6下的例子: 定义接口 #import <Foundation/Foundation.h> //基础库,类似C中的stdlib typedef ,type ...

  8. 代码规范、代码复审、PSP

    作业三: 代码规范.代码复审.PSP 代码规范 代码规范的重要性 一.规范的代码可以促进团队合作  一个项目大多都是由一个团队来完成,如果没有统一的代码规范,那么每个人的代码必定会风格迥异.且不说会存 ...

  9. Spring-Context之四:Spring容器及bean的定义

    Spring框架的核心功能之一就是控制反转(Inversion of Control, IoC),也叫做依赖注入(dependency injection, DI).关于依赖注入的具体内容可以参见Ma ...

  10. jmx完整示例

    很早就开始去了解这个了,不过一直都是皮毛,基本概念明白,具体api几乎一无不知... 认真看了几篇文章,做了测试,终于有所了解 参考 入门级别: http://www.cnblogs.com/agou ...