您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5
Css布局 响应式布局介绍
胜于蓝2019-07-30【CSS3|Html5】人已围观
简介1. 概念: 写一套css样式可以同时适配多个终端,是为解决移动互联网诞生的。2. 作用: 面对不同的分辨率设备灵活性强,能够快捷解决多设备显示适应问题3. 原理 媒体查询
1. 概念: 写一套css样式可以同时适配多个终端,是为解决移动互联网诞生的。
2. 作用: 面对不同的分辨率设备灵活性强,能够快捷解决多设备显示适应问题
3. 原理
媒体查询
① 外联式媒体查询语法
<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="red.css"/>当屏幕窗口大于等于960px时,引入 red.css 文件
<link rel="stylesheet" type="text/css" media="screen and (max-width: 960px)" href="blue.css"/>当屏幕窗口小于960px时,引入 blue.css 文件
② 内嵌式媒体查询
语法:
@media screen and (min-width: 640px) and (max-width: 960px){ body{ background: red; } }当屏幕窗口大于640px并且小于960px时,body背景色为红色
类型 | 布局宽度 |
---|---|
大屏幕 | 大于等于1200px |
默认 | 大于等于980px |
平板 | 大于等于768px |
手机到平板 | 小于等于767px |
手机 | 小于等于480px |
Tags:
很赞哦! ()
相关文章
随机图文
使用CSS3制作文字、图片倒影
CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safari和Opera浏览器下支持,但这并不影响我们来学习这个属性的应用HTML 颜色
HTML 颜色由红色、绿色、蓝色混合而成。颜色值HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十表格高级(表格相关css属性)(表格重要html属性)、样式重置
表格相关css属性1.合并相邻单元格边框(给table加) 语法: border-collapse: collapse(合并相邻单元格边框) | separate(相邻单元格边框分开);2.设置表格标题的位置(给tabCss3基础变形的语法以及使用介绍
语法: transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移);注: 当多种变形方式综合在一起时,用空格隔开 1. rotate 旋转( X/Y/Z 必须为大写 ) ① rot