html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--media 指定当前屏幕,当最大宽度不超过640时引入这个css-->
<link href="style.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)"/>
<!--内嵌-->
<style >
/*<!--大于640时引入的样式-->*/
@media screen and (min-width: 640px){
body{
background-color: red;
}
}
</style>
</head>
<body>
<!--
响应式布局:一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本
优点:
面向不同分辨设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间长
基本实现:
css中的media query(媒介查询)
设备宽高:device-width,device-heigth 物理宽高
渲染窗口的宽和高:width heigth
设备的手持方向:orientation
设备的分单率:resolution
使用方法:
外联:在外部引入
内嵌样式:直接写在内部
-->
</body>
</html>
外部css
*{margin: 0px;padding: 0px}
body{
background-color: pink;
}