发表于： 2018-09-22 23:21:40
1 643
今天完成的事情：
学习了半透明边框
半透明边框的写法：
例如：border: 5px solid rgba(XXX, XXX, XXX, 0.5)
解释：rgb表示边框的颜色，最后一个表示透明度，0.5即半透明。
学习了媒体查询
明天计划的事情：
响应式布局里面有很多的知识，响应式布局的应用非常广泛，继续学习响应式布局，并且多学学媒体查询。
遇到的困难：
暂无。
收获：
1.什么响应式设计（Responsive Design）
响应式设计是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，使网页自适应显示在不同大小终端设备上，如PC端和移动端设备。
2.什么是媒体查询（Media query）
针对不同大小的终端设备，自动检测系统尺寸、屏幕大小、屏幕定向等，选择不同的CSS样式，媒体查询是响应式的核心。
3.实例
①CSS3媒体查询引用方法
在html文件<head>标签里加入以下代码：
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">//媒体查询引用
<link rel="stylesheet" href="mediaQuery.css" />//引用css样式
</head>
</html>
参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
②常用媒体查询条件和媒体功能参数表[3]
功能 | 值 | 最大\最小值 | 描述 |
width | 长度：px、auto、百分比数 | 是 | 显示区域的宽度 |
height | 长度：px、auto、百分比数 | 是 | 显示区域的高度 |
device-width | 长度：px、auto、百分比数 | 是 | 设备的宽度 |
orientation | portrait 或landscape | 否 | 设备的方向 |
③编写方法：创建一个CSS文件如mediaQuery.css文件，文件中编写针对不同设备的样式，示例：
@media screen and (min-device-width: 960px) and (max-width:1200px){
body{width:100%;}
img{width:960px;;overflow:hidden;}
......(注：可以在这里面设计网页元素的CSS样式）
}
代码解释：当屏幕宽度大于等于960px小于1200px时，宽度大小设置为100%。图片大小为960px，超出的部分隐藏。
@media screen and (min-width: 560px) and (max-width:960px){
body{width:60%;}
}
代码解释：当屏幕宽度大于560px而小于960px时，宽度大小设置为60%。
@media screen and (max-width: 480px){
body{width:20%;}
}
代码解释：当屏幕宽度小于480px时，宽度大小设置为20%。
返回列表
评论