综合技术

Full responsive website vs mediaqueries

微信扫一扫,分享到朋友圈

Full responsive website vs mediaqueries
0

I am always coming back to the same question when developing a website for all devices.

Does it make more sense to make everything full responsive by setting everthing in percentage values or to query a few max-width and min-width with css3
so you can have your normal website with 960px and size it down for the different devices..

For the css3
mediaqueries i would use something like this:

/* CSS */
/* Basic responsive */
@media screen and (max-width: 960px) {  
/* ..custom CSS for viewports less than 960 here */
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}

/* iPads (portrait) and similar tablets */
@media only screen
and (min-device-width : 768px) {
header { /*...*/ }
section { /*...*/ }
footer { /*...*/ }
/* etc.. */
}

/* Smartphones */ 
@media only screen and (max-device-width : 480px) { 
header { /*...*/ } 
section { /*...*/ } 
footer { /*...*/ } 
/* etc.. */ 
}

thank you

Problem courtesy of: Marc Ster

Solution

You should do a bit of both. If you can write some CSS that works across all devices then that’s great. For example if your header goes 100% of the width for every device there’s no need to adjust it with media queries. In reality you’ll find certain parts don’t work and will need adjustment. This is where media queries come in.

You shouldn’t treat each media query as a new stylesheet, instead it should just alter or build on the styles already defined in order to make the layout work.

Typically sites adopt a mobile-first approach. This means you start with the mobile layout and increase the complexity as the viewport width increases. The benefit of this is that older browsers will get the simplistic mobile version of the site (which at least should work, even if it isn’t pretty on a desktop).

You can read more about responsive layouts here:

Build a Responsive, Mobile-Friendly Website From Scratch

Common Techniques in Responsive Web Design

Solution courtesy of: jd182

Discussion

A combination of both, or media queries.

Discussion courtesy of: Dijon

If you fall in such confusions, i would suggest to opt for
bootstrap

…otherwise, using media-queries is a better
option as it gives you wider flexibility and freedom to set values both in pixels
as well as percentages
.

Discussion courtesy of: NoobEditor

You have to remember that if you don’t use Media Queries, on every device (smartphone, desktop, laptop, etc.) you are loading all data for the website.
And if you load all data it loads also, for ex. images and that can cost a lot of Kb sent to the client browser.

With Media Queries you can set display: none;
to images on the page and less Kb will be send to the client.

So it is important to understand that form mobile devices you should send as small portion of data as possible.

Discussion courtesy of: Mad Max

This recipe can be found in it’s original form on Stack Over Flow
.

阅读原文...


微信扫一扫,分享到朋友圈

Full responsive website vs mediaqueries
0

CSS3 Recipes

Scaling Cloud Web & Data Technologies

上一篇

Microsoft Open-sources Approximate Nearest Neighbor Search Algorithm Powering Bing

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Full responsive website vs mediaqueries

长按储存图像,分享给朋友