CSS3
2018-06-24 02:24:00来源:未知 阅读 ()
1. 设备像素比
iphone3的分辨率为320x480,1个css像素等于一个屏幕物理像素
iphone4的分辨率为640x960(苹果公司便推出了所谓的Retina屏),分辨率提高了一倍,导致同样大的屏幕上像素多了一倍,安卓设备上分为ldpi、mdpi、hdpi、xhdpi等不同的等级
window对象有一个devicePixelRatio属性,官方定义为:设备物理像素和设备独立像素的比例,即 devicePixelRatio = 物理像素 / 独立像素
在Retina屏的iphone上,devicePixelRatio的值为2,即1个css像素相当于2个物理像素
苹果的iphone6是2倍图,一般写代码时量完尺寸都要除以2
2. 视口
手机端比较窄,若把PC端的网页直接放在移动端会无法完全显示,出现滚动条且字体较大,可以对viewport(视口)进行设置,把网页缩放在这个视口里,使其在移动端正常显示。
一般写移动端或响应式时会加上如下代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
快捷键:meta:vp+tab键
3. rem和em的区别
rem 的参照点是html根元素
em 的参照点是定义了字体的父元素(不推荐)
1em=16px 0.75em=12px
4. 媒体查询
@media screen and (max-width:768px){ body{ width:100%; height:100%; background-color:red; } } @media screen and (min-width:768px) and (max-width:1200px){ body{ width:100%; height:100%; background-color:green; } } @media screen and (min-width:1200px){ body{ width:100%; height:100%; background-color:yellow; } }
5. 伸缩布局
给父元素设置伸缩盒子 display:flex
给父元素设置justify-content来调整主轴方向子元素的对齐方式 有flex-start flex-content center space-around 和space-between等属性
给父元素设置align-items来调整侧轴方向子元素的对齐方式 有flex-start flex-content center stretch等属性
flex是设置子元素在伸缩盒子的父元素里面占据的份数
order是设置子元素在伸缩盒子的父元素里面的排序
flex-direction是调整主轴和侧轴的方向 默认是row 可以改成column
align-self是设置特殊子元素的排序方式
(未完,晚点更新)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS flex布局
下一篇:前端技术之_CSS详解第五天
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 2.CSS3选择器 2020-05-17
- 1.CSS3简介 2020-05-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash