前端知识解惑： 响应式 兼容性 不错的知识链接

Posted 2020-08-26 循序渐进，不急不躁

 

1.设备像素（device pixel） 指的是设备中使用的物理像素。 iphone5   640x1136px

2.css像素（css pixel） 逻辑像素
   px：相对单位，相对的是设备像素（device pixel）,所以相同的值在不同的屏幕上的大小是不同的哦。

3.Retina视网膜屏幕    ppi > 320                                        ppi（I即每英寸所拥有的像素数目）

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