智能手机的CSS响应式设计
[英]CSS responsive design for smartphone
问题描述
I created a little page: Link Here is the code: 
我创建了一个小页面： 链接这是代码：
*{ margin: 0px; padding: 0px; } body{ background-color: rgb(25, 81, 118); } .text { width: 70%; text-align: justify; font-size: 32px; color: white; margin-right: auto; margin-left: auto; margin-top: 200px; } nav{ width: 100%; background-color: white; } ul{ font-size: 0px; }
<!DOCTYPE html> <html> <head> <link href="css.css" type="text/css" rel="stylesheet"> <meta charset="utf-8"> </head> <body> <div class="text"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div> </body> </html>
If i view this side with my laptop it looks normal (i use Mozilla). 如果我用笔记本电脑看这面，那看起来很正常（我使用Mozilla）。 Now i opened the page with my smartphone and it looks like this. 现在，我用智能手机打开了页面，看起来像这样。
At the picture the number 1 is perfect, but not the picture 2. The text field should be 70% of the screen. 图片上的数字1是完美的，但图片2却不是。文本字段应为屏幕的70％。 Maybe someone of you have an idea. 也许你们中的某人有一个主意。
2 个解决方案
解决方案1
4 已采纳 2015-02-26 17:33:34
Add a viewport in head : 在head添加视口：
meta name="viewport" content="width=device-width, initial-scale=1">
Also, you can specify your mobile CSS inside a media query: 另外，您可以在媒体查询中指定移动CSS：
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
See Media queries for standard devices . 请参阅媒体查询中的标准设备 。
解决方案2
3 2015-02-26 17:33:26
Try using this meta tag in your HMTL head. 尝试在HMTL头中使用此元标记。
<meta name="viewport" content="width=device-width">
or 要么
<meta name="viewport" content="width=device-width, initial-scale=1">
For more info on this, take a look at this article on CSS Tricks 有关此的更多信息，请参阅CSS技巧文章
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.