如何使用响应式网页设计创建网站 [英] How to create website with responsive web design

问题描述

您好，



我在开发网站时遇到了一些问题。



我怎么能在我创建的网站中使用响应式网页设计。



我的网站不是完美的可查看的各种尺寸，如台式机，笔记本电脑，标签，移动设备等。



所以，任何建议。







谢谢。

解决方案

使用 Twitter Bootstrap 。它易于使用，并且可以通过不同的设备/浏览器工作。

响应式网页设计（RWD）是一种网页设计方法，旨在使网站自行更改以提供最佳的观看体验 - 轻松阅读和导航，只需调整大小，平移和滚动各种设备（从手机到台式电脑显示器）。



组件需要构建响应式网站。



1）查看端口

< meta name =viewportcontent =width = device-width，initial -scale = 1.0>





2）css媒体查询





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

/ * mobile Styles * /

}





@media only screen and（min-width：481px）and（max-width：800px）{

/ *标签样式* /

}





@media only屏幕和（最小宽度：801px）和（最大宽度：1024px）{

/ *桌面样式* /

}



查看此链接

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

Hello,

I have some problem, when i development website.

How can i use responsive web design in web site created by me.

my website are not perfect view-able in all size like desktop, laptop, tab, mobile etc..

so, any suggest for that.



Thanks.

解决方案

Use Twitter Bootstrap. Its easy to use and works awesomely through out different devices/browsers.

Responsive web design (RWD) is a web design approach aimed at making websites change itself to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

components that requires to build responsive website.

1)View port
<meta name="viewport" content="width=device-width, initial-scale=1.0">


2)css media queries


@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
http://waybloggy.blogspot.com/2014/09/components-required-for-responsive-web.html[^]

这篇关于如何使用响应式网页设计创建网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！