问题
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.
回答1:
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
回答2:
I wrote a polyfill to add min-width to the viewport meta tag:
https://github.com/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.
回答3:
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.com/css-media-queries/
回答4:
@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.com/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!
来源：https://stackoverflow.com/questions/15609357/set-min-width-in-viewport-metatag