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

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

时间: 2024-10-11 17:46:44

前端知识解惑: 响应式 兼容性 不错的知识链接的相关文章

与前端设计师谈响应式设计

昨天下午,我突然冒来一个想法请教下前端设计工程师,我问能否设计一个规避终端的皮肤,也就是不受终端限制的通用性前端框架. 前端工程师告诉我,那叫响应式设计. 我继续问,既然有这个技术,现实中,为什么要搞pc一套,手机一套,平板一套呢,多累啊. 前端告诉我,现实情况复杂很多,做个简单的响应式设计的还可以,复杂的就难了.带着他说的这些问题,还有其他同事所认同他的观念,我并不大认可这些说法(尽管我对前端不大清楚),于是上度娘,并找出一个比较复杂的,有点像大型的电子商务网站的案例(http://www.u

前端框架bootstrap(响应式布局)入门

Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现. 作用: 1.Bootstrap使得Web开发更加快捷,高效 2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题. 简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton

web前端-移动端响应式与自适应

一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下: <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> 简单分析一下这一行代码的含义:width=device

响应式布局的基础知识

响应式设计(布局): 出发点挺好,实际用起来非常不方便 1.大多数手机width=320px 2.大多数pad的width=1024px 媒体查询缺点: 1.流量非常浪费 2.少部分手机的分辨率不统一——非常乱 3.除了媒体查询,有更简单的方法——没必要media  媒体查询 @media screen ...... @media screen and (max-width:380px){   div{background:red;}}@media screen and (min-width:3

解决响应式布局下兼容性的问题

响应式布局主要是为了在各种终端中能正常显示界面,主要是面向的手机.平板等用户的网站比较多采用,而面向PC端的网站很少使用,因为主流的显示器都比较大了,而且大多数网站都采用1000宽度,针对手机端等往往又会另外开发一套前端.因为响应式布局兼容性并不好,在IE8以下的浏览器中无法实现效果.大家宁愿采用1000PX以下宽度的页面. 下面我提供一个办法解决这个问题. 公司最近新的项目中采用了宽屏1200PX的设计,这样就产生了一个问题,在1024*768的显示器上无法正常显示. 所以我额外的写了调整的样

响应式布局入门

最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应式设计,因为大屏幕的移动设备越来越普及.而自适应布局已经无法胜任各种浏览需求.响应式设计的目的是尽可能以最好的布局显示您的数据,以实现用户友好的 Web 页面. css2的时期有一个不是很常用的media type,他拥有比如aural(声音)braille(触摸)print(打印)handheld

【经验分享】响应式网站项目实操过程中的那些事儿

本次网站改版升级是我来到新公司的第一个项目,需求之初并没有提及要做响应式,在首次评审时领导和研发均认为响应式处理与我们网站相对契合,就这样我开始了我职场生涯中第一个响应式网站设计.下面就跟大家分享响应式网站设计中的那些事儿. 因为本人之前并没有接触过响应式设计,在项目开始前便恶补了一些响应式的基础知识.理论性资料网上众多,为了使各位对响应式有初步印象和认知,我在这里只做简单描述,各位若想要更全面深入的了解可自行百度. 1什么叫响应式设计,为什么要做响应式设计 (1)页面的设计和开发应当根据用户行

关于有偿提供拼图响应式后台的通知(转)

拼图响应式前端框架版响应式后台正式发布. 考虑到目前拼图的状况,我们不打算免费开放下载,但也不会收各位朋友1分钱,该版后台将有偿提供给各位给予拼图贡献的朋友. 废话不多说,一切皆以有图有真相,下面上图,欢迎各种果断围观,各种喷. 1,首先我们先看下,功能机(ldpi 320x442)分辨率下的效果. 2,然后我们再通过拼图响应式测试工具直接查看不同设备下该款后台的样子. http://www.pintuer.com/tools/test.html 3,目前该款后台暂时只提供登录及初始页.详细访问

复杂产品的响应式设计【流程篇】

转载:http://ued.taobao.org/blog/2013/05/复杂产品的响应式设计[流程篇]/ 响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计.前端和开发团队之间的协作模式带来新的挑战.在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历“玩客”第一版后,我们得到了一些答案. 响应式设计之所以叫响应式“设计”而不叫响应式“技术”,是因为它是一项设计先行的工作.需要设计先明确好响