I have learn CSS(Cascading Style Sheet) I have made some fixed layout, but I have do not understand make a responsive website with the help of Media Qurey. So I wan learn it, please every suggest me.
Open your web page in a browser on the largest screen you have available.
Slowly resize the browser narrower until your design breaks.
Work out the width of the browser viewport at that point.
Use that value in a media query to arrange the page differently based on whether the viewport is wider or narrower than that value.
Repeat for even narrower widths.
Felgall, I have No Idea I have try it, but I can’t.
Can’t what? Try to be a bit more specifc. You certainly can widen and narrow your browser. You can easily find out the browser width if you have dev tools open—such as those of Chrome.
Before using media queries, try to make the layout “fluid” not fixed. So avoid fixed sizes for width and height. You may set a fixed size for max-width but not width which could be a % value or left at full width. height will generally be left alone, as it should be allowed to increase as the width gets smaller. That will allow the elements to squash and stretch as the window size changes.
When you have that working, you may add media queries at any point that the design does not work at a particular size.
You also need to add a viewport meta tag to the head element:-
<meta name=viewport content="width=device-width, initial-scale=1" />
A typical media query looks like this:-
@media screen and (max-width: 600px) { }
Everything inside the brackets {} will apply only to a window size smaller than 600 pixels. Things outside of the brackets will apply globally, but may be overriden by the query on smaller screens.
This is a simple example, take a look at the css to see how it works
1 Like
Ralphmn, Thanks fo tech me I will do it Thanks for support me.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.