当前位置: 58彩票app下载 > 58彩票网络 > 正文

CSS3匹配屏幕横竖状态

时间:2019-11-20 06:27来源:58彩票网络
CSS3相配荧屏左右状态,CSS3相称荧屏状态 @media是css3中新定义的,作用十一分强盛,上边简单疏解一下用css3的@mediaorientation相配手提式无线电话机荧屏是横屏依旧竖屏。 从名称想到所包

CSS3相配荧屏左右状态,CSS3相称荧屏状态

@media是css3中新定义的,作用十一分强盛,上边简单疏解一下用css3的@media orientation相配手提式无线电话机荧屏是横屏依旧竖屏。

从名称想到所包涵的意义PC是回天无力相称横竖屏的,所以orientation只对移动道具起效。

1.底部声称
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">

加到<head></head>

  1. media 相配荧屏是横屏照旧竖屏
    @media all and (orientation : landscape) {  

/*  那是合营横屏的事态,横屏时的css代码  */
    body {   
        background-color: #ff0000;   
    }  

@media all and (orientation : portrait){  

/*  那是协作竖屏的情状,竖屏时的css代码  */
    body {  
        background-color: #00ff00;  
    }  

  1. 应用的地方

(1卡塔 尔(英语:State of Qatar)手提式有线电话机WEB页面成分内容相像都以通过比例定义的,以便能够在分裂分辨率设备下都能健康呈现,尽管那样,不过运动设备的荧屏分辨率宽度和冲天相差依旧不小,肖似的页面在荧屏翻转过来时可能百分比定义的因素宽度会变得不行大,那样就能够失掉页面的美观性,那样,假如用orientation相称显示器的扭曲状态,就足以写分化的css加以调节页面样式。

(2卡塔 尔(英语:State of Qatar)对于有背景图的位移WEB页面,能够依照orientation相配显示器荧屏状态,设置不一致的background。

(3卡塔 尔(阿拉伯语:قطر‎稍稍有技巧的某个:有个别有相对定位成分的WEB页面,将某成分定位到页面尾巴部分,当显示器是竖屏状态时,可能因为页面总参谋长度小于荧屏中度(然则超越显示器宽度),那时候将相对定位成分定位到底层是不易的,不过当荧屏翻转成为横屏时,那时候因为页面内容惊人超越显示器高度(正是未翻转时荧屏宽度),相对定位成分会覆盖在页面内容之上,引致页面现身难题,当时可用orientation匹配显示屏状态,调解css代码。

关于相配显示器横竖屏状态还可因此JS判别,js中onorientationchange是window的叁个事件,能够通过监听事件优秀显示器横竖屏。

@media是css3中新定义的,功用非凡常有力,上边简单讲明一下用css3的@media orientation相配手提式有线电话机显示器是横...

编辑:58彩票网络 本文来源:CSS3匹配屏幕横竖状态

关键词: