首页> 基础笔记 >CSS3基础学习 CSS3基础学习
响应式布局的两种方式
作者：小萝卜 2019-07-28 【 CSS3 CSS2 】 浏览 1288
简介响应式布局的两种方式
第一种：直接在页头中使用CSS样式修饰。
< style type="text/css">
/* 宽度范围 最高度*/
@media all and (min-width:300px) and (max-width:800px){
body{
color:red;
}
}
@media all and (min-width:100px) and (max-width:300px){
body{
color:green;
}
}
< /style>
第二种：导入不同的css样式文件：
< link media="all and (min-width:300px) and (max-width:800px)" rel="stylesheet" href="my.css" />
< link media="all and (min-width:100px) and (max-width:200px)" rel="stylesheet" href="test.css" />
很赞哦！ (0)
