13
March
31
CommentsGuide: איך לעצב אתר רספונסיבי בעזרת CSS3 Media Queries
If you are a client-party developers or web designers, I'm sure he left you hear the term “Website Design Rsfonsibi” (Responsive Web Design) Or “Design responds” Context of what you are doing. It's a hot concept in Web today and in the absence of proper guide in Hebrew on, I thought it was time to take the reins and write one of these.
At the end of this post you will become Competent “Responsive” Behalf of the blog toGraphic Design Technology (Row should add resume). In addition, You will know how to build a website Rsfonsibi as This example.
What is Design Rsfonsibi (Responsive Web Design)?
Before I get toHow do you develop a site Rsfonsibi Important for me to explain in a nutshell what all the fuss those who do not know (And those who do, Who knows? Maybe I renew to you something).
Design Rsfonsibi is a concept of following the rise of smartphones, Tablets and in fact all the technologies that changed the way we consume content the Web. If a few years ago was browsing through desktop computers (Stationary) Laptops or relatively identical resolutions – Which was very convenient for developers and designers and asking them to design fixed and immutable, After all, today there are hundreds of devices which can access Web sites such as smartphones, Tablets, Desktop computers, Mobile and even TV – Them to consider, Since most likely to access a website adapted to your computer desktop, Display device does not fit its screen size initially decreased by 10″ Inches at least… It Ditto”To TV screens or even computer screens (Only continue to grow), If I adjusted the site to a specific width – View a larger screen will give Lioser too much dead space (White Space) And hit his browsing experience.
Eventually, Rsfonsibi design goal is to tailor the site / Web application screen size when it is displayed.
How to create a design Rsfonsibi?
There are several methods of developing website design Rsfonsibi one of them is to useJavaScript. הסקריפט שנכתוב יבדוק את הרוחב של מסך המכשיר ולפי זה יטען את קובץ הCSS הרלוונטי. This method is nice, But there are certain problematic – מה קורה בEvent של Window.resize? Will we need to switch between various Hsteilim? Do we need to load all Hsteilim advance? That undermine the performance of the site. So maybe claimed only the style Hlroonti? But then the situation can happen when the page does not receive Steilim (Until the file finishes loading) – It also solvable, But you see where I'm going…
Another method – The method I am going to focus on is the use of CSS3 Media Queries. One of the seven wonders of the CSS3.
איך משתמשים ב CSS3 Media Queries?
Before we start Llachllachllach the code a little hands, Important analyzed in a moment on what devices and resolutions are we talking about here. For your convenience here is a list of resolutions should touch them:
- Smartphones: 320px.
- Tablets: Along – 768px, Across – 1024px.
- Yun + Mobile: 1024px And above.
כך שלמעשה כשאנחנו באים לבנות את קובץ הCSS ומשתמשים בMedia Queries We'll consider at least three states. Remember that.
Let's start with what HTML.
1 2 3 4 5 6 7 8 9 |
<body>
// HTML5 Markup
<div id="wrapper">
<header>This is my header</header>
<section>Main Content area</section>
<aside>Sidebar</aside>
<footer>Footer Area</footer>
</div>
</body>
|
I used the new tags Hmarkaf HTML5 And created a very basic skeleton of the site. יש לנו איזור Header, Main content area is divided into two (section וaside) ואיזור Footer – כולם עטופים ב בשם wrapper DIV.
We will continue with loading 2 קבצי CSS לתגית ה”head” בHTML שלנו. The first file: style.css – Contain all Hsteilim related to or dependent on wide screen. Colors, Desktop, מצבי Hover, Internal Riuohim etc.… In addition, הם גם יכילו עיצוב מבנה דיפולטיבי לשלד האתר.
1 |
<link href="style.css" rel="stylesheet" />
|
קובץ הCSS השני: responsive.css – Here is the interesting file, Treat for us in terms of the various devices and wide we want to make them our Hkostomiztziot.
1 |
<link href="responsive.css" rel="stylesheet" />
|
Let's take a look at what goes on inside.
1 2 3 4 5 |
@media screen and (max-width: 960px) { ... }
@media screen and (max-width: 758px) { ... }
@media screen and (max-width: 480px) { ... }
|
Remember at the beginning of the post I wrote that we were going to consider at least three states? That's exactly how it's done. Let's take for example the third line handles smartphones:
1 |
@media screen and (max-width: 480px) { ... }
|
In fact, This little line was created magic. What happens here is some assignment of Terms: If the media type that we're in is a Screen (ולא Print – Print Media) And רוחב המסך בו אנחנו נמצאים מגיע Maximum – 480 Pixels (That the width of the display screen), Treat all Hsteilim written in curly brackets. What will happen to their width screens is beyond 480 pixels? They will receive the design of theMedia Querie Next in line (In our case – The second line refers to 758 pixels).
Let's go over any terms and see what code is put into. Case and the screen is עד רוחב 960px:
1 2 3 4 5 6 7 8 9 10 11 12 |
@media screen and (max-width: 960px){
#wrapper {
width: 758px;
overflow: hidden;
}
section {
width: 420px;
}
aside {
width: 230px;
}
}
|
We reduce the width of the DIV that surrounds to 758, And we will reduce according to the width of the content area and region widgets.
Case and screen width is up to 758px (Find the length of the average tablet):
1 2 3 4 5 6 7 8 9 |
@media screen and (max-width: 758px){
#wrapper {
width: 480px;
}
section, aside {
float: none;
width: 440px;
}
}
|
We reduce the width of the DIV that surrounds to 480 pixels and notice that in that case I'll put the location of the widget area below the main content area (The Section) – I do it by”J. eliminating flooding (The Float) Of two elements. Also I would give them a fixed width of 440px.
And the last case, If we talk about smart phones and a width of less than 480 pixels:
1 2 3 4 5 6 7 8 9 10 11 12 |
@media screen and (max-width: 480px){
#wrapper {
max-width: 480px;
width: auto;
margin: 20px;
}
section, aside {
float: none;
width: 92%;
padding: 4%;
}
}
|
In such a case should try to be more dynamic. So I will define in CSS that the Wrapper will receive a maximum width of 480px when he knew well adapt at least for. Besides, I give the content area width Aside Section and percentages so they know to adapt optimally to the screen.
Only one small thing. The tags to media and design will also work in Mobile you will need to add the following meta tag in the head tag in your HTML:
1 |
<meta name ='viewport' content='width=device-width, initial-scale=1.0'>
|
And the final result:
If this guide helped you, Ferghana Blake and blog post. Do you have questions about web design Rsfonsibiim? Feel free to ask reactions.
Little about Daniel Sternlicht
Daniel Sternlicht is designed and developed client side with two original iPhones. Living and breathing Web work and at home, Try to learn something new every day as a teacher with Google, And- Notepad כמחברת. In his spare time you will find it runs the blog graphic design and technology and explores new web technologies.
31 Comments "Guide: איך לעצב אתר רספונסיבי בעזרת CSS3 Media Queries"
Sagi Schreiber
One of the strongest Htotorielim
Thank you Daniel!
...
Cool explanation and a way to work but why limit to 3 or 4 Only situations when there is no - countless situations, not just about agree.
Daniel Sternlicht
On the contrary – I encourage reference to as many situations, If written notice of minimum conditions to treat it 3.
...
When “Ask” For example:
@media screen and (max-width: 758px)
That means the total of 758 Pixel. What's screen 640? Or 320? Or 1920?
Or I “Borrowed” The client “What is your resolution” And behaves according to the answer or if you want to make a real reagent design so no need to question or limit any.
...
Desktop and laptop resolutions: 1920×1200 1680×1050 1600×1200 1440×900 1366×768 1280×1024 1280×800 1280×768 1152×864 1024×768 800×600
Tablet resolutions: 800×1280 768×1024
High-end phone resolutions: 640×960 360×640 320×480 320×396 240×320
Daniel Sternlicht
Inaccurate, Entry conditions / This question is relevant as long as the screen width of less than 758 Hioser pixels or alternatively – If you treated a smaller width such as 640 So the previous Square will be canceled and the browser according to the new Square.
If you referred to the width of 758 And width of the screen of Hioser is 1920, Square probably would not be relevant, And the browser will treat Lsteil Hdifoltibi set.
Oren Root
You should refer to the amount Hlieotim you want to create.
Eventually Android device screen at 20 pixels smaller iPhone screen is not to necessarily give it a new structure (The design itself is the percentage, So it fits the design).
In conclusion I would say the amount should match the amount Hlieotim conditions who want to produce. Three conditions be sufficient for most cases
...
Really do not agree. Lieot or grid is one, Instruments and resolutions are many. Not to mention the condition of having a man of total 1920 Pixel but its browser window is 842 On 931 Pixel. What to do if it?
...
And begin to analyze the browser's zoom also?
Ron
I was impressed would be best to dynamic development with CSS percentages that”Itgms” According to different screen width, not only by those who make advance.
Daniel Sternlicht
You're absolutely right, But sometimes the use of percentages is not enough.
Take the example I gave Hliiawt, If accessed through a small screen, Column of the widgets next column is not relevant to the content – You have no taste in both, What the widget column percentages will drop the word line at the most.
Percentages in this case it will not help.
...
Time will tell…
Avi Kenan
Very nice,
I loved
Fingbak: איך לעצב אתר רספונסיבי בעזרת CSS3 Media Queries [Guide] | Newsgeek
picjew
Thank you for the post
I loved him very much
Retirement
Definitely not just a matter of- CSS3 הזה
Again required to learn new material will go through each site and learn anew
Do you also have video training videos?
Daniel Sternlicht
It's not just start learning all over again – Total”About the CSS was just the same, No new syntax or something like, Only consideration in some situations.
About the video clips – These issues are currently not, But it was certainly one of the things I plan to spend future.
Gil Alroy
Hi Daniel, I agree with you: Design Rsfonsibi works perfectly with a relatively small number of Media Queries – Just look at the CSS code of websites Rsfonsibiim particularly worth studying (The Boston Globe, For example). The trick is (And it is not your guide – Maybe in the next chapter?) Also cause images to be especially backgrounds Rsfonsibiim. It's insanely easy when we understand how to do it. Percent play a role in a big way, And… in – Forget those Scbrr. What is, Have a background in mathematics (Need to know to perform division).
By the way, Rsfonsibi design can be applied on all he has parameters of minimum and maximum (Including color, Resolution, etc.).
I strongly recommend the book very thin and intelligent writing one of the pioneers in the field: http://www.abookapart.com/products/responsive-web-design
Gil Alroy
And for anyone interested, Some frameworks that will help you build a website quickly and efficiently Rsfonsibi:
http://foundation.zurb.com
http://www.getskeleton.com
http://www.amazium.co.uk
http://lessframework.com
Igal Carmi
Here the main problem. Lots of people do work sites Rsfonsibim “About” Frameworks that have favorable. The result – Sea of bad mobile sites.
Daniel Sternlicht
Hey Y, I totally agree with you about it that RWD is not a good solution for Mobile. If planning the CSS architecture project before there is no reason in the world to get large files and arranged – On the contrary, Much easier to think of this in writing OOCSS.
About the final product – I do agree with you that a lot of times designers / Developers do not know how to filter content in Mobile, But part of the mobile user experience is scrolling. Their specialized applications use the content is satisfying Drop. Why Internet sites that will be different?
Igal Carmi
Daniel, First, Finally, someone answers, Key Discussion, And attacks. Pleasure
And interest:
1A. True, Drop in Mobile widespread use, Mainly thanks to Facebook. And still, This is not an optimal design. Let's take the example site that displays 15 Photos on the Web (Suppose, Agency representing artists), Grid of 5 Across three rows. RWD will make it a sausage 15 Images in Mobile. Surely it was better to use Mobile Photo Gallery.
1In. He'll take one of the sites considered in the RWD. The Boston Globe. Open it in Mobile and tell me you, Sincerely, If so would you choose to shape it to Mobile. Difficult to orient, Difficult to find what you want, No sensible arrangement.
2. ה-CSS, Linc would love to find a reasonable CSS files. I have not come across such a. See Value, For example, The Boston Globe.
3. Now let's touch point in the practice: Two years have passed. Design you will find them of HTML5 out of fashion on the Web. I want to change the look. This necessarily affects all other instances. Why? What is it good?
Or alternatively, I want to do a redesign for Mobile – Again, That changed things. Why do this Hkfling?
4. I'd love to hear about the advantage of Harsfonsib (Not associated with Google's view). Hint:Instead of a single content management is advantageous to have a solution.
Fingbak: איך לעצב אתר רספונסיבי בעזרת CSS3 Media Queries - Designer guide | Pixel Perfect Magazine
Gift
Post is very clear and pleasant read bravo
Jasmine
Two sites Rsfonsibim slightly differently:
http://the100.co.il/
Dice “Get along” B”P. browser width.
שימוש ב-jquery.vgrid, עם קצת עזרה מ-easing.
http://www.hadarimstore.co.il/
Background image zoom in / out depending on the resolution, Border width by a certain image changes”Than save time uploading a picture of too low resolution and too low-quality image at high resolutions.
שימוש ב-supersized.
Daniel Sternlicht
Well done Yasmin, Nice work.
Computer technician
אחלה מאמר תודה רבה
Efrat
Great post, Noah and legible!! There are more posts about? Such as using background images, etc.…
Igal Carmi
Daniel, Good Guide. The problem to. Design Rsfonsibi give bad solution for Mobile. This sausage unusable. And finally Hdcc CSS files are huge and maintenance.
Meirav
How to decide what are the maximum and minimum resolutions?
Daniel Sternlicht
Hey maximum, Big the can decide for yourself what resolutions you want to change the design elements. Canvas”There are some things that are standard and relatively reasonable: Take the main resolution for each type of device – Unlocked, Tablet, Mobile and Desktop, And that all the others will be affected.