I'm designing a web page [responsive]. Min-width of the screen should be 480px. how do i do it?
Right now i'm fixing the width to 480px which looks perfect on the phones but looks pretty huge on the tablets. For big screens the width should change dynamically.
I'm designing a web page [responsive]. Min-width of the screen should be 480px. how do i do it?
Right now i'm fixing the width to 480px which looks perfect on the phones but looks pretty huge on the tablets. For big screens the width should change dynamically.
Share Improve this question asked Mar 25, 2013 at 7:01 user1617207user1617207 1314 silver badges9 bronze badges 6- do you know about @media css? – egig Commented Mar 25, 2013 at 7:04
-
Wouldn't setting
min-width:480pxin CSS using@mediaqueries work? – VKen Commented Mar 25, 2013 at 7:05 - Yea. A lil bit, i guess i'll have write a new css to the whole page! change font stuff and everything? – user1617207 Commented Mar 25, 2013 at 7:07
- 1 Who said responsive design was easy? :) – Michaël Hompus Commented Mar 25, 2013 at 7:09
- As a long time designer, i have had to take multiple websites from old clients and turned there non responsive code to responsive, its not easy task. But worth it in the end. – NodeDad Commented Mar 25, 2013 at 7:24
4 Answers
Reset to default 4I wrote a polyfill to add min-width to the viewport meta tag:
https://github./brendanlong/viewport-min-width-polyfill
If you use it, can you just do:
<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=480"/>
<script type="text/javascript" src="viewport-min-width.js"></script>
It works by replacing the viewport with a static width if screen.width < minWidth. I've tested in mobile Firefox and Chrome, and it should work in Safari from what I've heard.
min-width in view port meta tag
<meta name="viewport" content="width=480">
or
@-o-viewport {
width: 480px;
}
for responsive design
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Using media queries
@media screen and (max-width: 480px) {
css
}
Media queries
view port
Put all of your desktop CSS as you normally would, i imagine, just as you are now. then use media queries to call upon your new css elements.
@media screen and (max-width: 480px) {
//all of your mobile styling
}
also add media="screen" to where your calling your stylesheet in your <head> rel="stylesheet"
also heres a great tutorial http://css-tricks./css-media-queries/
@media queries are definitely what you need. They allow you to execute different CSS depending on the size of the viewport viewing your site.
This site here has a great @media query template to work off:
http://css-tricks./snippets/css/media-queries-for-standard-devices/
But generally, start by styling your desktop version first. Then make any modifications under the appropriate @media queries defined in the link above. It's a good place to start I think!
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745250129a4618627.html
评论列表（0条）