最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

css判断不同分辨率显示不同宽度布局实现自适应宽度_html/css

来源:动视网 责编:小采 时间:2020-11-27 16:09:44
文档

css判断不同分辨率显示不同宽度布局实现自适应宽度_html/css

css判断不同分辨率显示不同宽度布局实现自适应宽度_html/css_WEB-ITnose:1、DIVCSS小案例描述我们首先设置一个DIV盒子CSS命名为.abc,设置其高度为300px,css边框为黑色;以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。我 们通过手动拖拽浏览器显示宽度,然后观察此盒子宽度变化情况,当浏览器宽度调节到
推荐度:
导读css判断不同分辨率显示不同宽度布局实现自适应宽度_html/css_WEB-ITnose:1、DIVCSS小案例描述我们首先设置一个DIV盒子CSS命名为.abc,设置其高度为300px,css边框为黑色;以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。我 们通过手动拖拽浏览器显示宽度,然后观察此盒子宽度变化情况,当浏览器宽度调节到


1、DIVCSS小案例描述
我们首先设置一个DIV盒子CSS命名为“.abc”,设置其高度为300px,css边框为黑色;以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。
我 们通过手动拖拽浏览器显示宽度,然后观察此盒子宽度变化情况,当浏览器宽度调节到宽度不大于500px时,对应此盒子宽度显示100px;调节浏览器宽度 不大于901px时,显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时,盒子对象宽度显示1200px;当小于 1200px时候显示宽度为900px。

.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* css注释:设置了浏览器宽度不小于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排错将导致判断失效。

    无标题文档    DIVCSS5实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度  

4、为了兼容IE9以下版本浏览器需要加入一个google的JS,当然可以下载引人html

 

5.完美兼容

    无标题文档  

文档

css判断不同分辨率显示不同宽度布局实现自适应宽度_html/css

css判断不同分辨率显示不同宽度布局实现自适应宽度_html/css_WEB-ITnose:1、DIVCSS小案例描述我们首先设置一个DIV盒子CSS命名为.abc,设置其高度为300px,css边框为黑色;以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。我 们通过手动拖拽浏览器显示宽度,然后观察此盒子宽度变化情况,当浏览器宽度调节到
推荐度:
标签: 分辨率 it html
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top