css自适应屏幕宽度（css3怎样实现屏幕自适应）
本文目录
css3怎样实现屏幕自适应
/* 打印样式 */
@media print {
color: red;
}
/* 手机等小屏幕手持设备 */
@media screen and (min-width: 320px) and (max-width: 480px) {
body {
background: yellow;
}
}
/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
body {
background: blue;
}
}
/* PC客户端或大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {
body {
background: green;
}
}
/* 竖屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}
/* 横屏 */
@media screen and (orientation:landscape){对应样式}
手机、平板设备屏幕尺寸众多，宽度不一，写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活，如果你css不熟练的话最好先别折腾这块，把基础练好了来。
还有，用了css媒体查询后，ie6-8载入不了样式表，要引用个：Respond.js来让ie6-8下正确载入css。js自行百度，到处有下载。
如何添加CSS让页面自适应手机屏幕
无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。首先，在网页代码的头部，加入一行viewport标签《meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /》viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。其次：网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。当然可以用width:auto;第三，流动布局.left{float: left;width: ***%;}第四，选择加载css这是自适应的关键部分.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 901px) { .abc {width: 200px;} } /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。第四，图片自适应img { max-width: 100%;}老版本的IE不支持max-width，所以只好写成：img { width: 100%; }筚五、采用相对字体大小字体也不能使用绝对大小（px），而只能使用相对大小（em）。这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。祝你好运！
CSS四个DIV自适应屏幕宽度，间距相同怎么写
《div class="box"》《div》《/div》《div》《/div》《div》《/div》《div》《/div》《/div》《style》*{padding:0;margin:0;}.box{width:80%;height:200px;margin:auto;display:flex;flex-direction: row;border:1px solid #000;}.box》div{height:100%;flex:1;background:red;}.box》div:not(:first-child){margin-left:15px;}《/style》
更多文章：
2024年7月24日 05:57
cmd中copy怎么用（如何在CMD下把指定文件复制到指定文件夹内）
2024年3月22日 17:10
2024年7月11日 23:32
python方向选择（学会python可以有哪些就业方向天津python培训）
2024年9月26日 05:30
fdisk使用方法？fdisk 命令分区操作中,创建新分区的子命令是
2024年7月20日 01:55
curling溃疡怎么读（curling iron 怎么读）
2024年7月8日 17:17
2024年7月23日 14:50
pgc全球总决赛2021赛程（2021pgc全球总决赛MCG进的去嘛）
2024年6月30日 18:40
chromium安卓下载（安卓手机上推荐的三个浏览器，你安装了哪一个（2））
2024年7月16日 11:08
spyder和python一样吗（python和spyder的区别）
2024年8月15日 03:15
2024年5月4日 07:52
2024年8月26日 11:35
2024年7月22日 04:10
2024年8月19日 01:55
2024年7月8日 09:18
directions是什么意思中文（directions是什么意思）
2024年7月8日 00:29
2024年9月27日 09:00
2024年7月15日 05:23
python每秒并发2000个请求（高并发,用Python适合吗）
2023年11月14日 19:00
仓库管理系统java课程设计（java仓库管理系统的打印功能是怎么实现的）
2024年7月20日 11:02
