码迷,mamicode.com
首页 > Web开发 > 详细

CSS:Hack,响应式布局及自适应布局,px和em及rem的区别

时间:2020-01-15 21:18:36      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:目的   自动   自动识别   大于   响应式布局   精确   优先   服务层   项目   

1.Hack

Hack是由于现有的浏览器解析不同,为了兼容各浏览器,采用的一种补救的方法。并且只针对太古老的浏览器,不推荐使用。

Hack的实现方法有三种:

(1)css类内部的Hack

(2)css选择器的Hack

(3)css头部的Hack

hack原理是通过不同的浏览器自身所带有的特别标识符以及css中优先级的机制来实现不同浏览器里css样式兼容性的问题。

2.响应式布局和自适应布局

(1)自适应布局:

通过检测视口分辨率,来判断当前访问的设备,从而请求服务层,返回不同的页面。需要开发多套界面,自适应对页面做的屏幕适配是在一定范围:比如pc端一般要大于1024像素,手机端要小于768像素。自适应布局如果屏幕太小会发生内容过于拥挤。

(2)响应式布局

响应式布局只需要开发一套界面,响应式布局是一套页面全部适应。响应式布局通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。响应式布局不会因为屏幕太小发生内容过于拥挤的情况,它可以自动识别屏幕宽度并做出相应调整的网页设计。

(3)总结:响应式布局要比自适应布局要好一点,但是自适应布局更加贴切实际,因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点,我们要根据项目的需求来选择适合的布局方式。

3.px,em,rem的区别

px:即像素,页面按精确像素展示,px是绝对单位,而em和rem不是。

em:默认情况下1em=16px,em有继承性,少用于开发,一般用于测试文字。

rem:默认情况下1rem=16px,rem没有继承性,但是会受根元素的影响,常用于移动端开发。

CSS:Hack,响应式布局及自适应布局,px和em及rem的区别

标签:目的   自动   自动识别   大于   响应式布局   精确   优先   服务层   项目   

原文地址:https://www.cnblogs.com/xxqd/p/12198756.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!