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>