CSS之响应式Web设计

方向:横屏/竖屏

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

语法:

orientation:portrait | landscape

portrait:指定输出设备中的页面可见区域高度大于或等于宽度

landscape:除portrait值情况外,都是landsca

实例:

/*竖屏*/

@media only screen and (orientation:portrait ) {

}

/*横屏*/

@media only screen and (orientation:landscape) {

body *{ display:none;}

body{ background-color:lightblue;}

body:after{ content:"为了更好的体验,请使用竖屏游览!!!"}

}

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181019A0K9HV00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券