bootstrap query.html<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- orientation:portrait表示竖屏，即指输出设备的height>=width -->
<!-- orientation:landscape表示横屏，即指输出设备的height<width -->
<meta name="viewport" content="width=device-width,maximum-scale=2.0,minimum-scale=1.0,user-scalable=no,initial-scale=1.0">
<!-- 此等方法会加载全部的外部引入的css文件，不管此页面是否用到 -->
<!-- 有选择性的加载某些外部css文件 -->
<!-- <link rel="stylesheet" href="./mediaQuery.css" media="screen and (width:380px) and (height:500px) and (orientation:portrait)"> -->
<link rel="stylesheet" href="./pad.css" media="screen and (min-width:600px) and (max-width:1000px)">
<link rel="stylesheet" href="./pc.css" media="screen and (min-width:1000px)">
<link rel="stylesheet" href="./phone.css" media="screen and (max-width:600px)">
<title>媒体查询技术</title>
</head>
<body>
<h1>media</h1>
<p>css3 media query</p>
</body>
</html>pc.cssh1{
font-size: 20px;
}
p{
border: 2px solid red;
}
*{
margin:0px;
padding: 0px;
background-color: #eee;
}
pad.cssh1{
font-size: 20px;
}
p{
border: 2px solid red;
}
*{
margin:0px;
padding: 0px;
background-color: #88f;
}//phone.css
h1{
font-size: 20px; } p{ border: 2px solid red; } *{ margin:0px; padding: 0px; background-color: blue; }
3131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
