首页 > 代码库 > 前端知识解惑: 响应式 兼容性 不错的知识链接
前端知识解惑: 响应式 兼容性 不错的知识链接
1.设备像素(device pixel) 指的是设备中使用的物理像素。 iphone5 640x1136px
2.css像素(css pixel) 逻辑像素
px:相对单位,相对的是设备像素(device pixel),所以相同的值在不同的屏幕上的大小是不同的哦。
3.Retina视网膜屏幕 ppi > 320
4.ppi:每英寸像素,每英寸所拥有的像素数目。
低密度
中密度
高密度
超高密度: ppi > 320:retina 视网膜屏
5.设备像素比:device pixel ratio
iphone5: 2, 一个css像素在iphone5上用4个像素哦。
媒体查询:查的是物理像素哦! 真实分辨率
设备像素比,对于桌面设备而言(PC),一般设备像素比都是1:1。但对于手机、平板而言,就是2:1,甚至更高。
手机上的分辨率指的是逻辑分辨率? 答:看样子应该是的! (手机最大能显示这么多的)
分辨率就是屏幕上横、纵的总象素点数。
渐进增强:你的浏览器越强,你看到的效果就越好,用户体验就越好。
响应式:一次设计,普遍适用。 (自适应式响应式的子集?)
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
[html] view plain copy
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
-->、
下载那个js文件:博客上的哦! Modernlize (浏览器兼容用的到哦! )
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
学习CSS的好地方哦: CSS Zen Garden
懂得:
前端:做页面 SEO 浏览器兼容 响应式 性能调优 代码的可维护行(可读性只是其中的一部分)
域名常识要懂得!
答:域名层次:顶级域名(不含国家后缀)
二级域名(国家后缀)
子域名(在顶级域名前面加入一个“.”即为二级子域名)
浏览器常识补充!
轮询! 中断! (OS)
显卡位数:32位显卡,决定设备可以显示的颜色种类。
要克服:
1.webstrom打开js文件乱码?
解决方案:曲线救国,在其他工具中打开不乱码,那么粘贴复制过来不就好了!
2.还是那句话,写之前先看看别人是如何做的! 有利于提升自我。
3.去做,不要想着多难,多难! 自己给自己设置屏障呢! 你这属于!
文章参照来源:
1.http://www.jianshu.com/p/af6dad66e49a
2.http://screensiz.es/phone
3.http://www.cnblogs.com/samwu/p/5421110.html
4.segmentfault 简书 国内的博客网站
5.https://my.oschina.net/liu-xuewei/blog/345580
6.像素和分辨率:https://zhidao.baidu.com/question/495047256172161524.html
前端知识解惑: 响应式 兼容性 不错的知识链接