媒体查询使用和设备像素比
来源:互联网 发布:相片日历制作软件 编辑:程序博客网 时间:2024/05/18 01:15
首先我们在使用Media的时候需要设置下面这段代码,来兼容移动设备的展示效果
准备工作1:设置Meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">代码参数解释:
- width = device-width 宽度等于当前设备的宽度
- initial-scale = 1.0 初始缩放比例(默认1.0)
- maximum-scale = 1.0 允许用户缩放到最大比例(默认1.0)
- minimum-scale = 1.0 允许用户缩放到最小比例(默认1.0)
准备工作2:加载兼容js文件
因为IE8既不支持HTML5也不支持CSS3的Media,所以我们需要加载两个js文件,来保证我们实现兼容效果
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]-->准备工作3:设置IE的渲染方式默认为最高(可选)
<meta http-equiv="X-UA-Compatible" content="IE=edge">还有一个更好的写法
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
这段代码后面加了一个chrome=1,这个谷歌内嵌浏览器框架GCF,如果用户电脑里面装了chrome的插件,那就可以让电脑里面的IE不管是哪个版本都可以使用Webit引擎以及V8引擎进行排版及运算,无比给力,不过用户要是没装这个插件,那这段代码就会让IE以最高的文档模式展现,建议加上。
进入CSS3 Media写法:
@media screen and (max-width: 960px){ body{ background: #ccc; }}这算是一个Media的标准写法,代码意思是:当页面小于960px的时候执行下面的代码
当浏览器尺寸大于960px的时候代码
@media screen and (min-width:960px){ body{ background:orange; }}我们还可以混合使用上面的用法:
@media screen and (min-width:960px) and (max-width:1200px){ body{ background:yellow; }}这段代码的意思就是页面宽度大于960px小于1200px的时候执行下面代码
设备像素比(关于手机端1像素大小不一的问题)
在实际开发中,有时候写的是1px,但是手机上看起来是2px,有很多种方法可以解决,通过transform: sacleY() 可以实现,也有通过背景图,viewport实现的
下面是通过transform来实现手机端的1像素,用的stylus语法
border-t-1px($color) //border-top position: relative &::before display: block position: absolute left:0 top:0 width:100% border-top:1px solid $color content:' 'border-b-1px($color) //border-bottom position: relative &::after display: block position: absolute left:0 bottom:0 width:100% border-top:1px solid $color content:' '
@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5) .border-t-1px &::before -webkit-transform: scaleY(0.7) transform:scaleY(0.7)@media(-webkit-min-device-pixel-ratio: 2),(min-device-device-pixel-ratio: 2) .border-t-1px &::before -webkit-transform: scaleY(0.5) transform:scaleY(0.5)@media(-webkit-min-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5) .border-t-1px &::before -webkit-transform: scaleY(0.4) transform:scaleY(0.33333334)@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5) .border-b-1px &::after -webkit-transform: scaleY(0.7) transform:scaleY(0.7)@media(-webkit-min-device-pixel-ratio: 2),(min-device-device-pixel-ratio: 2) .border-b-1px &::after -webkit-transform: scaleY(0.5) transform:scaleY(0.5)@media(-webkit-min-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5) .border-b-1px &::after -webkit-transform: scaleY(0.4) transform:scaleY(0.4)
阅读全文
1 0
- 媒体查询使用和设备像素比
- 设备像素比devicePixelRatio:
- 设备像素比
- 设备像素比,设备独立像素
- 设备像素比(devicePixelRatio)
- 设备像素比与rem
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
- 设备像素(物理像素), css像素, 设备独立像素, 设备像素比
- 设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解
- 使用@media媒体查询实现多设备字体图片自适应
- 设备像素和CSS 像素
- 媒体查询之一物理像素的设置
- 苹果设备媒体查询列表
- 设备像素比devicePixelRatio简单介绍
- 设备像素比devicePixelRatio简单介绍
- 设备像素比devicePixelRatio简单介绍
- 设备像素比devicePixelRatio简单介绍
- 设备像素比devicePixelRatio简单介绍
- Pycharm 2017 激活码
- linux环境jdk安装
- ActiveReports 报表控件V12新特性 -- 无需ETL处理,即可实现跨数据源分析数据
- 堆排序
- JndiObjectFactoryBean 配置数据源
- 媒体查询使用和设备像素比
- Android App节日换肤
- 百度UEditor的简单使用,JSP页面的表单中的内容后台获取和前端配置-结合项目使用
- 产品开发
- libmemcached的C-API访问memcached server
- 2018年迎春杯复赛入围名单(六年级)
- Java8 Stream API
- 我的爷爷
- Glide的缓存机制