Do you still need media queries to make website responsive when you have already used flex box? Are there any instances where media queries give us better control?
Yes there are a lot of things where you would still use media-queries.
You would probably want to switch from flex-basis: 200px; to a more flexible flex-basis: 50%; width on mobiles.
A combination of both is probably best.
If you are working with percentages and wan't a different column count on smaller devices there is imho no way around media queries.
Flex-box and Grid Layout, along with Multi-column layout are responsive by default. These specifications were written in a world where responsive design and supporting multiple devices was already a thing. This means that they include a lot of common sense functionality, which enables responsive design without us needing to do much.
If we want to change the size or proportions of some columns, we have to add a break-point using a Media Query and redefine them. We have no other options when working in percentages, as they will always be the same percentage of the container they are in, whether that container is wide or narrow.
FlexBox is one thing.
Responsive Web Desing (RWD) is something different.
FlexBox is a native CSS set of properties allowing you to apply some specific layout-related styles to your parent and child elements.
RWD is an approach of adjusting the site to fit every screen size. In order to achieve this, you use #MediaQueries.
Flexbox is not a replacement for mediaQueries. Magic happens when you use them together.
Imagine a situation where you want to replace an img scr in the "background" css property when user's screen size goes below 768px. How would You do that with Flexbox but without #Media rules ?
MediaQueries are really powerful and give you a lot of possibilities to control different layouts on your site based on the screen width.
Related
I made a Navigation bar in the header and have added media queries for mobile devices and table but any thing in middle of this makes the page layout look bad so do i need to add more media queries for all measurements or is there an other way of making page more responsive.
I tried doing it with media queries but was wondering if their is another way around.
You can use libraries like Bootstrap or Tailwind and its easy to learn and use,
or you can just use flexbox or grids in CSS.
Learn more about Flexbox on MDN, using this link.
Learn more about the CSS Grid Layout system on MDN, using this link.
you can use your same media queries but make sure that your sizes are in
em
or
%
in this case everything will go smaller and bigger according to the user's device width.
that's in case you don't want to use a css library which is also recommended.
First, lets keep all simple, is not required to use libraries to build a responsive views
You need to implement mobile first, implement mobile then you can adjust only required elements to other break points (tablet, desktop, ...)
Here you can use break points, flex, grid and positions
Manage all spaces (margins, paddings) with parent container to make less changes, here you can take advantage of flex and grid to centered and spaces between elements the trick is property gap, in this days is not required to use tables to adjust elements
If you are building components dont forget, all components should be reusable, configurable and mantenible
Here is some interesting content:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I am working on a simple html 5 game similar to http://www.ebaumsworld.com/games/play/80617036/.
I need to make the game responsive and I wanted to ask if I should go use CSS media queries or if I should just go for a percentage-based lay-out using percentage dimensions for the width and height of elements.
Which would the best way to go?
The difference between a fluid lay-out and the use of media queries has been written out here: https://ux.stackexchange.com/questions/24406/what-is-the-exact-difference-between-fluid-and-responsive-design
A fluid or percentage-based lay-out is used when the lay-out should be similar on every screen. It keeps the same spatial weighing for all elements, regardless of the screen size.
Responsive design (media queries) is used to change the lay-out on different screen sizes.
From the limited information available on what you're trying to achieve, I would opt for a combination of both. Use percentage-based dimensions for sizing, and use media queries to ensure that the blocks don't cover 90% of a 32" screen for instance...
I make use of percentages by specifying the width of elements I want to stretch and percentages when specifying "left" "left:40%;" for example and a relative position. This allows elements to move with the page when it's resized and stretch but at certain resolutions sizes the elements don't entirely stay in place. Am I stuck using media queries for this issue or is there another way? I'm still using media queries but I also don't want my design breaking so early before reaching breakpoints, I want it to be as flexible/elastic as possible before having to have media queries kick in.
I think instead of worrying about those wacky sizes where your page looks funky, you should think about the most common screen sizes that are actually used.
I know exactly what you mean about those breakpoints. That's why I use screenfly to test my site on the most common screen sizes and work from there.
And if your site elements aren't maintaining your desired positions, then you are probably calculating the percentages wrongly. Here is a great article that helped me with fluid layouts and how to set up the percentages and what-not: http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-9122768
Use float: left with a percentage width instead, and that should accomplish what you need. If you're using left: 40% for an offset (gap or spacing), try using margin-left.
I have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.
There are many types of display that people use, so it is hard to expect what resolutions will your user use to view your site. To avoid this problem, I am thinking using percentage instead of pixels, em and pt to define the web layout. However, is this a good practice to do this? Including using the percentage, eg 80% for the main wrapper ?
I know it is hard to do it when it come to determine the width of the inner element. I'll have to calculate the percentages based on the each div's parent. How do you guys cope with this problem when it come to different browser's resolution?
Css media query is best solution for this check this http://css-tricks.com/css-media-queries/
There's obviously debate between fluid and fixed layouts, but fluid layouts can work very well as well.
An example is smashing magazine (try resizing your window with the site loaded).
I believe that it would be a lot easier if you use a framework of some sort. If you have used any grids CSS framework before, you can have a look at Liquid Blueprint. This allows you to work in a grid based manner, but have the page fluidly resize according to the browser's size.
I use percentages for every width within the outer container but have min-width: and max-width: for the container itself, so it scales a small amount. Say 960px for min width and 1160px for the max width. This way it works larger screen sizes better and if I want to I can go back and make it responsive because its already all in percentages.