Tag Archives: css

响应式设计学习笔记

在响应式设计中,浏览器并不是根据物理硬件的像素宽度而工作的,而是根据DIPs宽度工作,DIPs全称为“Device Independent Pixels”,DIP也是一种计量单位,该值将像素值与实际距离联系起来,dip的值表示的是屏幕上同样大小的空间,即比如两个手机的2dip,这个值不管设备的像素密度是多少,显示的大小都是一样。

但其中有一个转换的比值叫DPR(Device Pixels Ratio),可以通过浏览器的window.devicePixelRatio属性查询到。比如其Chrome book的DPR为2,而chrome book的硬件像素为2560,那么实际Dpis为1280。

从上面的内容得知,视窗宽度(即css像素值)是由下列公式组成:
\frac{实际像素(物理像素)}{像素比}
可以通过设置视窗的值来让浏览器知道我们的意图,比如下面的代码:

  <meta  name="viewport"  content="width=device-width,initial-scale=1">  

其中,name的值为viewport,即告诉浏览器设置视窗,其content中的内容则是设置视窗的值,其中有两个值:

  1. 第一个值”content=width=device”的意思是告诉浏览器将视窗的大小设置为设备的宽度,这样就能够让该页面匹配不同屏幕尺寸
  2. 第二个值”initial-scale=1″的意思是添加初始化缩放比例属性,即告诉浏览器相对像素与css像素的比例为1:1,这样的好处在于,如果不设置该缩放的值,有可能设备在变化横置或者纵置的时候,还是保持之前的大小,以及在缩放的时候也无法自动调整布局。

因为在不同设备上的css像素取值多种多样,所以不能只用视窗宽度属性就能解决所有的显示问题,因为过大的css宽度或者绝对定位,会让元素太大不适应屏幕,而这个时候就得使用相对单位,因为所有的相对单位都是属于基于某个元素。

css允许其元素溢出其容器,如果设置的大小超过了其容器的大小,就会溢出,如果在其他小于设置大小的屏幕上浏览的时候,就会产生左右滑动的溢出,所以设置相对单位就可以保证其元素小于其容器。

需要注意的是:css选项中max-width(height)会覆盖其单独设置的height和width的值。

正常的手指为10mm,大约等于40个css像素,所以在考虑设置按钮像素的时候可以设置为48*48px,而最好保持按钮和按钮之间有大概40px的间隔,以保证不会触发误按。

而在设计响应式的时候尽量做到不用直接用height和width值,因为他们是固定值,所以应该尽量用max和min设置大小。

设计响应式的页面的时候应该是从小到大的设备进行设计,因为这样可以考虑到在小屏幕下,会仔细的考虑哪些信息的重要性,而从大到小,可能会漏掉很多的关键信息,还有可能就是,从小到大的时候,做到中间尺寸的设备的时候,你可能也就不需要更大尺寸的设备了。并且有部分老的设备是不支持媒体查询的,所以从小到大,会有很多优势。

单位em是一个相对单位,常见用于设置内间距,比如按钮或者a标签内的文字,比如下面的这段代码,就代表了相对于当前a标签的字体的1.5倍间距,而第二个值inherit则表示继承自父组件,意思就是上下由我们定义为字体大小的1.5倍,而左右的内间距属性则继承父级。

  footer a {   padding: 1.5em;  }  

除此之外,只是使用视窗设置和相对单位,会造成由于小屏幕看着很好的页面,而到大页面的时候会造成损失,比如图片过于拉伸,页面内容显示单一等问题,这个时候就需要采用媒体查询,媒体查询的作用是可以让我们用一些简单的逻辑来选择性的加载css文件,比如下面的代码设置了屏幕尺寸大于500的css像素才加载该css。

  <link  rel="stylesheet" media="screen and (min-width:500px)"  href="/css/master.css">  

Continue reading