使用CSS3媒体查询进行响应式设计 [英] Responsive Design with CSS3 Media Queries

问题描述

大家好，



我想实现一个MVC应用程序，其中包括带有CSS3媒体查询的响应式设计



我期待一些指导



谢谢和问候，



Soumya

解决方案

大家好，



我可以通过Twitter Bootstrap来解决（http://twitter.github.com/bootstrap/ [ ]



谢谢，

Soumya

现在一天的手机，标签和笔记本电脑有许多类型的屏幕尺寸。如果您决定处理那么多分辨率，您必须编写那么多样式表。



这就是专业人士建议在单一样式表中编写媒体查询的原因。喜欢这个





@media only screen and（min-width：320px）and（max-width：480px）{

/ *手机款式* /

}





@media only screen and（最小宽度：481px）和（最大宽度：800px）{

/ *标签样式* /

}





@media only screen and（min-width：801px）and（max-width：1024px）{

/ * Desktops Styles * /

}



查看此链接以进行自适应网页设计：



http://waybloggy.blogspot.com/2014/09/components-required-for- responsive-web.html [ ^ ]

媒体查询 [ ^ ]



你可以跟进上面的链接进行媒体查询，但正如Soumya所提到的，今天的bootstrap是最常用的工具，因为它有内置的类来制作你的网站响应。只需下载并包含bootstrap-responsive.min.js并使用它的类。

希望这有帮助

谢谢

：）

Hi All,

I want to implement an MVC application which include Responsive Design with CSS3 Media Queries

I am expecting some guidance

Thanks & Regards,

Soumya

解决方案

Hi All,

I could solve with the Twitter Bootstrap(http://twitter.github.com/bootstrap/[])

Thanks,
Soumya

Now a days mobiles, tabs and laptops are having many types of screen sizes. If you decide to handle that many resolutions you have to write that many style sheets.

That's why professionals recommend to write media queries inside single style sheet. Like this


@media only screen and (min-width : 320px) and (max-width : 480px) {
/* mobile Styles */
}


@media only screen and (min-width : 481px) and (max-width : 800px) {
/*Tab Styles */
}


@media only screen and (min-width : 801px) and (max-width : 1024px) {
/*Desktops Styles */
}

Check it out this link for responsive web designing:

http://waybloggy.blogspot.com/2014/09/components-required-for-responsive-web.html[^]

Media Queries[^]

You could follow up with the above link for media queries, but as above Soumya mentioned, bootstrap today is the mostly used tool as it has inbuilt classes for making your site responsive. Just download and include the bootstrap-responsive.min.js and use its classes.
Hope this helps
Thanks
:)

这篇关于使用CSS3媒体查询进行响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！