it-swarm.cn

屏幕和移动样式表

我已经查看了这个问题的堆栈溢出主题,以及一些谷歌搜索结果,但我似乎无法解决我的问题。

我已经为移动设备(mobile.css)创建了一个样式表,它本质上是我的main.css的副本,其中包含许多属性的更改。当我只加载mobile.css作为样式表时,它在我的iPhone上看起来很棒,就像我想要的那样。然而,当我把两者都放进去的时候,我得到了两者的混合,但更多的是main.css

知道为什么吗?

<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
19
xIlluzionx

根据 documents ,在特定设备/条件中加载另一个文件的语法是这样的:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

这将为每一个width加载一个css文件

对于具有Retina显示屏的iPhone 4和新一代iPod touch,您应该注意一些事项。 iPhone 4的宽度是640像素,许多开发人员不会将此宽度计为移动浏览器宽度。如果您在文档中添加此元标记问题将得到解决

<meta name="viewport" content="width=320">

此元标记会影响您的图像质量。如果你想解决这个问题,那么你需要阅读这个 这里

31
Mohsen

很难知道没有任何标记,但我猜你应该做的事情如下:
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

<link rel="stylesheet" href="base.css" /> // has all the common classes
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 320px)" />
<link rel="stylesheet" href="largescreen.css" media="screen and (min-device-width: 321px)" />
3
James Khoury

您的移动样式表是有条件加载的,这意味着计算机将加载main.css,而iPhone将加载main.cssmobile.css

如果你想在iPhone上加载页面时从头开始,只需将这块CSS添加到mobile.css的顶部:

/*
YUI 3.4.0 (build 3928)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

它有效地重置了CSS。

0
Blender

@scott;可能你需要在mobile.css之后定义main.css,如下所示:

<link rel="stylesheet" href="main.css" media="screen" /> 
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 480px)" />

或者您可以在mobile css中定义main.css,如下所示:

@media screen and (max-device-width: 480px){
  body {
    background: #ccc;
  }
}

编辑:

在你的html中写下<!DOCTYPE html>而不是<DOCTYPE html>

0
sandeep