构建响应式网站 [英] Constructing a responsive website
问题描述
在今天的网络开发社区，使网站完全响应几乎是标准做法，这意味着它可以在所有屏幕尺寸上工作。
目前有一个网站，设计为设置的宽度和高度为900 * 600px。但是，我想改变这种方式，使我能够使其移动响应，而不会失去其功能。
我在寻找一些行业标准的概念在这种情况下，我可以适应这个目的，虽然我对于专业人士在现实世界的情况下如何实现这一点略有损失。
+ --------------------------------------- +
| NAVBAR（900px）|
+ --------------------------------------- +
| | |
| | |
| |身体|
| 200px | （700px）|
| | |
| | |
| | |
| | |
+ --------------------------------------- +
下面是适合900 * 600px屏幕的布局设计的快速演示：
.page-wrap {height：600px; width：900px;背景：lightgray; position：absolute; top：0; left：0;}。nav {position：absolute; top：0; left：0; height：50px; width：900px; background：tomato;}。sidebar {position：absolute; top：50px; left：0; height：550px; width：200px; background：dimgray;}。nav a {display：inline-block; height：50px; width：100px; line-height：50px; text-decoration：none; background：rgba（200，200，200，0.4）;}。nav a：hover {background：transparent;}
< div class =page-wrap> < div class =nav> < a href =＃> nav bar item< / a>< a href =＃> nav bar item< / a>< a href =＃> nav bar item< / a> ;< a href =＃> nav bar item< / a>< a href =＃> nav bar item< / a> < / div> < div class =sidebar> < / div>< / div>
如何构建这种响应式设计？在处理响应设计时是否有最佳实践？
有许多方法。
您需要使用RWD，代表响应式网页设计。
这意味着你可以在一个可变大小的屏幕上提供你的网页，而不必重写你的HTML一遍又一遍。
使用动态单位
b
使网页响应的最重要的功能之一是您使用的单位，所以我会首先提到。目前，您已使用（像素）px单位对这些值进行硬编码，这将被视为静态单位。
您可以在生成您的标记时考虑几个单位：
绝对长度单位相对于彼此是固定的，
锚定到一些物理测量。当
输出环境已知时，它们主要是有用的。绝对单位包括
物理单位（in，cm，mm，pt，pc）和px单位〜
note 这是一篇旧文章， href =http://caniuse.com/#feat=viewport-units =nofollow noreferrer>改善了很多
例如，使用百分比的喜好意味着您可以根据所包含的块的大小设置div的宽度和/或高度。
例如，resize您的屏幕：
div {width：50％ ;背景：番茄; height：50px;}
< div>< / div>
如果你从头构建你的网站，这将变得非常方便，但如果你也适应一个也很有用。
使用媒体查询
正确使用媒体查询非常好。
媒体查询是一个逻辑表达式，可以是true或false。如果媒体查询的媒体类型与运行用户代理的设备的
媒体类型（在适用于行中定义为
）相匹配，则A
媒体查询为true，并且媒体查询中的所有表达式都是
true。
为适用于所有
媒体类型的媒体查询提供简写语法;关键字'all'可以省略（连同
尾随'和'）。也就是说如果媒体类型没有明确给出，它是
'all'。
例如，如果我的屏幕小于500px，使用这个css代替。
这将使用类似的定义：
@media（max-width：500px）{
//当屏幕宽度超过500像素时，我的css
}
一些媒体查询可以在媒体查询列表中组合。 A
以逗号分隔的媒体查询列表。如果逗号分隔列表中的一个或多个媒体
查询为真，则整个列表为真，
，否则为假。在媒体查询语法中，逗号表示
a逻辑OR，而'和'关键字表示逻辑AND
A简单的演示是：
div {width ：500px; height：200px;背景：灰色} @media screen and（max-width：500px）{div {width：100px;背景：番茄; }}
< div>< / div>
使用响应式插件
（个人不建议，但仍然有效）
Bootstrap是最流行的HTML， CSS和JS框架为
开发响应式网络。
虽然我建议不要使用它，很多不必要的CSS规则，因此我认为它应该只用于概念代码，而不是生产代码。
其他框架包括：
使用这些组合
在现实中，大多数开发人员将使用这些组合的全部范围。
没有一个'确定'的方式使网站响应。但是，希望你能够在将来使用其中的一些。In today's web development community, It is almost 'standard practise' to make a website "fully responsive" - meaning it would work on all screen sizes.
I currently have a website that is designed for a set width and height of 900 * 600px. However, I would like to alter this in such a way that I can make it mobile responsive, without loosing its functionality.
I was looking for some 'industry standard' concepts in which I could adapt to this purpose, although I am at a slight loss as to how 'professionals' would go about achieving this in real world situations?
+---------------------------------------+ | NAVBAR (900px) | +---------------------------------------+ | | | | | | | | body | |200px | (700px) | | | | | | | | | | | | | +---------------------------------------+Here's a quick demo of a layout design which suits the 900 * 600px screen:
.page-wrap { height: 600px; width: 900px; background: lightgray; position: absolute; top: 0; left: 0; } .nav { position: absolute; top: 0; left: 0; height: 50px; width: 900px; background: tomato; } .sidebar { position: absolute; top: 50px; left: 0; height: 550px; width: 200px; background: dimgray; } .nav a { display: inline-block; height: 50px; width: 100px; line-height: 50px; text-decoration: none; background: rgba(200, 200, 200, 0.4); } .nav a:hover { background: transparent; }
<div class="page-wrap"> <div class="nav"> <a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a> </div> <div class="sidebar"> </div> </div>
In short, how would this 'responsive' design be constructed? Is there a 'best practise' when dealing with responsive-designs?
解决方案there are many ways in order to make a website responsive. It bottles down to so many factors.
You need to use RWD, which stands for Responsive Web Design. It means that you can deliver your webpage in a variable size of screen, without having to re-write your html over and over. This is very much a must-do if you had to work with mobile and/or tablet devices.
Use Dynamic Units
One of the most important features of making a webpage responsive is the units you use, so I'll mention that first of all. At the moment, you have 'hard coded' these values by using a (pixel) px unit, which would be seen as a 'static unit'.
Below is a couple of units you may want to consider in the generation of your markup:
The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit ~ w3.org
The above table displays what is known as 'absolute' units, and this is because they do not 'technically' change when you resize your browser or view on a mobile device.
Instead of using such units, you should consider using one of the 'dynamic' units. For example:
~Image from this article note this is an old article, and support for these has improved a lot since
Using the likes of percentage, for example, means you can set the width and/or height of a div depending on your containing block's size.
For example, resize your screen here:
div { width: 50%; background: tomato; height: 50px; }
<div></div>
You should notice how that div will always be '50% of its container'.
This would become very handy if you were building your website from scratch, but would also be useful if you were adapting one as well.
Use Media Queries
Media queries are great when used properly.
A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true.
A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.
For example, you could test something like "if my screen is smaller than 500px, use this css instead".
This would use a definition of something like:
@media (max-width:500px) { //my css for when screen is lass than 500px wide }
Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND
A simple demo of this would be:
div{ width:500px; height:200px; background:gray; } @media screen and (max-width:500px){ div{ width:100px; background:tomato; } }
<div></div>
Use a Responsive Plugin
(Personally not advised, but still valid)
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive webs.
Although I would advise not to using this, as it has a lot of 'unnecessary' css rules and hence I think it should only be used for 'concept code', and not production code.
Other Frameworks include:
Use a combination of these
In reality, most developers would use a whole range of combinations of these. There isn't really a 'definitive' way of making a website responsive. However, hopefully you will be able to use some of this in future.
这篇关于构建响应式网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
