meta标签 viewpoint

  还有一个不可或缺的东东,那就是meta标签,可以说,在响应式设计中如果没有这个meta标签,你就是蹩脚的,响应式设计就是空谈。其使用方法如下

<meta name=”viewport” content=”” />

  在content属性中主要包括以下属性值,用来处理可视区域。  

meta标签 viewpoint_第1张图片

 

  在实际项目中,为了让Responsive设计在智能设备中能显示正常,也就是浏览Web页面适应屏幕的大小,显示在屏幕上,可以通过这个可视区域的meta标签进行重置,告诉他使用设备的宽度为视图的宽度,也就是说禁止其默认的自适应页面的效果,具体设置如下:

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

  另外一点,由于Responsive设计是结合CSS3的Media Queries属性,才能尽显Responsive设计风格,但大家都清楚,在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求。

 

Responsive设计——不同设备的分辨率设置

  下面我们一起来看看CSS3 Meida Queries在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求:

  1.1024px显屏

@media screen and (max-width : 1024px) {                    
/* 样式写在这里 */          
}  

  2.800px显屏

@media screen and (max-width : 800px) {              
/* 样式写在这里 */          
}  

  3.640px显屏

@media screen and (max-width : 640px) {              
/* 样式写在这*/            
}  

  4.iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              
/* 样式写在这 */            
}     

  5.iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {         
/* 样式写在这 */            
}   

  6.iPhone  Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              
/* 样式写在这 */            
}   

 

你可能感兴趣的:(meta标签 viewpoint)