3：media媒体查询屏幕大小，设定像素样式以及meta viewport视窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
.d1{
width: 25%;
height: 200px;
background: skyblue;
}
/* 媒体查询 */
/* 移动端设定 */
/* 设定小于600像素时候的样式 */
@media only screen and (max-width:600px) {
.d1{
width: 100%;
background: darkred;
}
}
/* pc样式 */
/* 设定大于1200像素的样式 */
@media only screen and (min-width:1200px) {
.d1{
width: 33%;
background: yellow;
}
}
/* 平板设定 */
/* 设定600-1200px的样式 */
@media only screen and (min-width:600px) and (max-width:1200px) {
.d1{
width: 50%;
background: green;
}
}
/* 1:并不是所有的页面都需要移动端和pc端，应为如果页面过于复杂，那么代码就会比较凌乱或者是代码量比较繁多。
而且不能更加针对性的设置pc和移动端页面
2：使用媒体查询，必须加上meta viewport标签。
*/
</style>
</head>
<body>
<!--
大屏幕pc端的时候，d1占据50%的宽度
小屏幕移动端的时候，d1占据100%宽度
-->
<div class="d1">
</div>
<!-- 弹性布局：用于页面的布局（与响应式无关联）
meta viewport：设置用于手机端的响应式，width=固定的宽度。
@media媒体查询：用于查询屏幕大小，根据屏幕大小来设定相关的样式。
响应式官网页面：apple ----><!-- 弹性布局，meta viewport，@media媒体查询 -->
<!-- 移动端页面淘宝：天猫----弹性布局， meta viewport移动端响应 -
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--
viewport视窗设置
content=
"width=device-width,//宽度等于设备宽度，浏览器宽度分辨率等于系统分辨率
initial-scale=1,//初始化的比例是1
minimum-scale=1,//最小的缩小比例1
maximum-scale=1,//最大的放大比例是1
user-scalable=no"//用户不允许缩放
物理分辨率750*1334
系统分辨率375*667
-->
</head>
<body>
<h1>helloworld</h1>
<div id="">
hello world
</div>
</body>
</html>
1295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
