您现在的位置是:首页 > 网站制作 > 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-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} CSS3 椭圆形 #css3-elipse{ width: 200px; height: 100pxCss变形 其他一些变形属性的语法以及使用
1. 改变变形元素中心位置 语法: transform-origin: left | right | center top | center | bottom;2. 变形综合 将多种变形综合在一起时,顺序不一样,效果有可能不一样HTML5 新元素
HTML5 新元素自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用,HTML5添加CSS 颜色
颜色是由红(RED),绿(GREEN),蓝(BLUE )光线的显示结合。颜色值CSS中定义颜色使用十六进制(hex)表示法为红,绿,蓝的颜色值结合。可以是最低值是0(十六进制00)到最高值是255(十六进制FF)3个双位
文章评论
当前时间
合利宝合作加盟
合作加盟
快钱代理公告
- 凡事扫码代理必须实名认证
- 实名认证后才可拉进代理微信群
- 代理微信群有相关活动政策等