meta标签 viewpoint

最新推荐文章于 2024-11-24 14:52:55 发布

weixin_30892889

最新推荐文章于 2024-11-24 14:52:55 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/amaoegg/p/4402737.html

本文详细介绍了响应式设计中meta标签的重要性和使用方法，包括如何通过meta标签调整可视区域，实现适配不同设备屏幕的布局。同时，文章阐述了CSS3 Media Queries在响应式设计中的应用，提供了一系列针对不同设备分辨率的样式设置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

　　在实际项目中，为了让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) {              
/* 样式写在这 */            
}

转载于:https://www.cnblogs.com/amaoegg/p/4402737.html