响应式设计中的媒体查询 [英] media queries in responsive design

问题描述

我正在创建一个响应式网站.对于较小显示器的 CSS，我是这样写的:

I'm creating a responsive website. For the CSS for smaller monitors I wrote this:

@media only screen and (min-width: 1224px) and (max-width: 1440px) {
/*css here*/
}

和 css 的 HTML 部分:

and the HTML part for the css:

<link rel="stylesheet" type="text/css" media="screen (min-width: 1224px)" href="css/monitor.css" />

当我为智能手机创建 css 时:html:

and when I create the css for smartphones: html:

<link rel="stylesheet" type="text/css" media="(min-width: 320px)" href="css/mobile.css" />

CSS:

@media handheld and (min-device-width: 320px),
handheld and (max-device-width: 767px) {
/*css here*/
}

1. 不要在智能手机上看到我的 css 设置
2. 在监视器中我看到我写的 mobile.css

我该怎么办?

推荐答案

尝试使用媒体类型屏幕"而不是手持设备".大多数移动设备会说它们是一个屏幕.所以你的 css 将是:

Try using the media type 'screen' rather then 'handheld'. Most mobile devices will say they are a screen . So your css would be:

@media screen and (min-device-width: 320px),
screen and (max-device-width: 767px) {
/*css here*/
}

这篇关于响应式设计中的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！