CSS3

cnsworder 发布于2019-04-23 13:44 / 728人阅读

摘要：设备像素比的分辨率为，个像素等于一个屏幕物理像素的分辨率为苹果公司便推出了所谓的屏，分辨率提高了一倍，导致同样大的屏幕上像素多了一倍，安卓设备上分为等不同的等级对象有一个属性，官方定义为设备物理像素和设备独立像素的比例，即物理像素独立像素在

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是设置特殊子元素的排序方式

（未完，晚点更新）

GPU云服务器云服务器 css3 css3气泡 css3动画 JS+CSS3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2279.html

CSS重塑计划（一）：选择符

摘要：重塑计划一选择符元素选择符通配选择符，选择所有元素对象。选择符，以唯一标识符属性等于的对象作为选择符。选择具有属性且属性值为包含的字符串的元素。伪类选择符设置超链接在未被访问前的样式。仅用于规则匹配不含有选择符的元素。 CSS重塑计划（一）：选择符元素选择符 *通配选择符(Universal Selector)，选择所有元素对象。E类型选择符(Type Selector)，以文档语言...

lx1036 2019-08-29 12:23 评论0 收藏0
前端面试题-渐进增强和优雅降级

摘要：一背景介绍渐进增强和优雅降级这两个概念是在出现之后火起来的。二概念理解渐进增强渐进增强一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果交互追加功能达到更好的体验。一、背景介绍渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器...

HollisChuang 2019-08-30 14:10 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

hiyang 2019-08-29 16:12 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

王军 2019-08-23 10:29 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

SimonMa 2019-08-02 11:03 评论0 收藏0