-
外联样式表查看全部
-
引入方法查看全部
-
媒介查询常见属性查看全部
-
使用media 的响应式布局 <!-- media 只有当屏幕的分辨率小于或等于480px,才使用这个样式 --> <link rel="stylesheet" href="text/css" href="style.css" media="only screen and (max-width:480px)"> <style> /* media 只有当屏幕的分辨率大于480px,才使用这个样式 */ @media screen and (min-width: 480px){ body{ background-color: #c00;} } </style>查看全部
-
响应式设计 优点:解决了设备之间的差异化展示 缺点:兼容性代码多,工作量大,加载速度受影响。 对原有网站布局会产生影响,用户判断未必精确。查看全部
-
响应式布局: 1、服务器根据不同的浏览器用户端,为用户呈现不同的页面效果。 2、可以让一个网站兼容不同分辨率的设备,给用户更好的视觉使用体验。 3、移动互联网催生了响应式布局的诞生。查看全部
-
<link type="text/css" rel="stylesheet" href="xx.css" media="only screen and (max-width:480px)" /> <style> @media screen and(min-width:480px){ xxx:xxxx; } </style>查看全部
-
常见的属性:查看全部
-
设计原则: 移动优先 设计初期就考虑 渐进增强 充分发挥硬件设备功能查看全部
-
device-width, device-height-屏幕宽高(物理宽度 高度) width,height-渲染窗口宽高 orientation-设备方向(横屏 竖屏) resolution-设备分辨率 内嵌 <style> @media screen and (min-width:480px){background:#fffccc} </style> 外联 <link type="text/css" rel="stylesheet" href="xx.css" media="only screen and (max-width:480px)"/>查看全部
-
使用if判断,然后引入respond js查看全部
-
respond.js部署在webserver下,最好是把网站和respond部署在同一个网站下查看全部
-
media query device-width device-hidth 物理宽度 orientation 设备方向 resolutiong 设备分辨率 @media screen and(min-width:480px){ } <link type="text/css" href="" rel="stylesheet" media="only screen and(max-width:480px)"/>外联查看全部
-
css3 Media-Query 常见属性 device-width device-height----屏幕宽高 width height ----渲染窗口大小 ----可看到的实际的浏览器窗口的大小 orientation 设备方向 resolution 设备分辨率查看全部
-
device-width device-height 屏幕宽高 orientation 设备方向 resolution 设备分辨率查看全部
举报
0/150
提交
取消