Html 如何为tab和mobile定义不同的css
我正在创建一个网页，必须更改mobile和tab中的一些CSS，我必须为两者定义CSS，但两者中只有一个起作用，如何为两个设备定义不同的CSSHtml 如何为tab和mobile定义不同的css,html,css,responsive-design,Html,Css,Responsive Design,我正在创建一个网页，必须更改mobile和tab中的一些CSS，我必须为两者定义CSS，但两者中只有一个起作用，如何为两个设备定义不同的CSS <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /*css for desktop*/ .form-container{ width: 60%; margin
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*css for desktop*/
.form-container{
width: 60%;
margin-left: 20%;
margin-right: 20%;
background: blue;
}
.form-container-inner{
padding: 20px;
}
/*css for tab*/
@media (min-width: 768px) and (max-width: 1024px) {
.form-container{
width: 80%;
margin-left: 10%;
margin-right: 10%;
background: red;
}
}
/*css for mobile*/
@media only screen and (max-width: 992px){
.form-container{
width: 100%;
margin-left: 0%;
margin-right: 0%;
background: green;
}
}
</style>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body>
<div class="form-container">
<div class="form-container-inner">
<label>Name</label>
<input type="text" name="" >
<br>
<label>Surname</label>
<input type="text" name="" >
<br>
<label>Password</label>
<input type="text" name="" >
</div>
</div>
</body>
</html>
/*桌面css*/
.表格容器{
宽度：60%；
左缘：20%；
保证金权利：20%；
背景：蓝色；
}
.表格容器内部{
填充：20px；
}
/*标签的css*/
@介质（最小宽度：768px）和（最大宽度：1024px）{
.表格容器{
宽度：80%；
左边距：10%；
保证金权利：10%；
背景：红色；
}
}
/*用于移动设备的css*/
@仅介质屏幕和（最大宽度：992px）{
.表格容器{
宽度：100%；
左边缘：0%；
右边距：0%；
背景：绿色；
}
}
名称
姓
密码
/* On screens that are 768px or less */
@media screen and (max-width: 768px) {
// Your code
.form-container{
width: 100%;
margin-left: 0%;
margin-right: 0%;
background: green;
}
}
/* On screens that are between 768px and 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
// Your code
.form-container{
width: 80%;
margin-left: 10%;
margin-right: 10%;
background: red;
}
}
/* CSS for tablets and above (768px and above) */
.form-container{
width: 80%;
margin-left: 10%;
margin-right: 10%;
background: red;
}
/* On screens that are 767px or less */
@media (max-width: 767px) {
// Your code
.form-container{
width: 100%;
margin-left: 0%;
margin-right: 0%;
background: green;
}
}
所有标签或以上的css都应该正常运行。它们将被移动媒体查询覆盖根据我的经验，您不需要同时定义
（最小宽度：*px）（最大宽度：*px）