怎样通过css的media属性,适配不同分辨率的终端设备?
2016-02-22 09:13
573 查看
怎样通过css的media属性,适配不同分辨率的终端设备,示比例如以下:
当然。也能够依据终端分辨率的变化去引用不同的css文件,示比例如以下:
注意: 仅仅须要将第一个文件中面的ccs写入四个css文件。
<!DOCTYPE html> <html> <head> <title>首页</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> @media (max-width:768px) { #div1 { width: 400px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 100px; } } @media (min-width:768px) { #div1 { width: 600px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 200px; } } @media (min-width:992px) { #div1 { width: 800px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 300px; } } @media (min-width:1200px) { #div1 { width: 1000px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 400px; } } </style> </head> <body> <div id="div1"> <img id="img2" alt="img2" src="../img/2.JPG"> <img id="img3" alt="img3" src="../img/3.JPG"> </div> </body> </html>
当然。也能够依据终端分辨率的变化去引用不同的css文件,示比例如以下:
<!DOCTYPE html> <html> <head> <title>首页</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="(max-width: 768px)" href="../css/max-768px.css"> <link rel="stylesheet" media="(min-width: 768px)" href="../css/min-768px.css"> <link rel="stylesheet" media="(min-width: 992px)" href="../css/min-992px.css"> <link rel="stylesheet" media="(min-width: 1200px)" href="../css/min-1200px.css"> </head> <body> <div id="div1"> <img id="img2" alt="img2" src="../img/2.JPG"> <img id="img3" alt="img3" src="../img/3.JPG"> </div> </body> </html>
注意: 仅仅须要将第一个文件中面的ccs写入四个css文件。
相关文章推荐
- HTML基础(CSS)
- CSS-id选择器与class选择器的区别
- CSS3使用自定义字体(font-face)
- CSS之flex
- 自定义PageControl样式
- CSS如何解决子元素越界
- 学习Discuz! X3.2记录:对幻灯播放的进一步修改,包括css,代码
- CSS的逻辑长度与现实的物理长度
- CSS 选择器 element.id 与element .id element.class 与 element .class
- CSS3 变形小结
- CSS 巧用 :before和:after
- css学习
- CSS定位与浮动
- 自定义datepickerDialog的样式
- 如何给xml应用样式
- CSS3-Hover 效果 展示
- web页面滚动条样式修改
- CSS3新增颜色属性
- css3实现动画效果(transform translation @keyframes)
- CSS 三角形绘制方法