css 横屏 竖屏

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uniapp中,可以通过以下步骤来设置横屏竖屏: 1. 在manifest.json文件中设置屏幕方向,如下所示: ```json "plus": { "orientation": "portrait" }, ``` 其中,orientation可以设置为portrait(竖屏)或landscape(横屏)。 2. 在App.vue中设置样式,如下所示: ```css <style> .page { width: 100vw; height: 100vh; overflow: hidden; } .page.landscape { transform: rotate(90deg); transform-origin: 50% 50%; width: 100vh; height: 100vw; } </style> ``` 其中,.page是页面的样式,可以根据实际情况进行修改。.page.landscape是横屏状态下的样式,使用transform属性进行旋转,并设置宽高和transform-origin属性。 3. 在需要横屏的页面中,使用以下代码来切换样式: ```javascript export default { mounted() { this.$nextTick(() => { if (window.plus) { // 横屏 plus.screen.lockOrientation('landscape'); document.documentElement.classList.add('landscape'); } }); }, beforeDestroy() { if (window.plus) { // 竖屏 plus.screen.unlockOrientation(); document.documentElement.classList.remove('landscape'); } } } ``` 其中,mounted和beforeDestroy是页面生命周期钩子函数,用于在页面加载和销毁时进行操作。plus.screen.lockOrientation('landscape')用于锁定屏幕方向,document.documentElement.classList.add('landscape')用于切换样式。同理,plus.screen.unlockOrientation()和document.documentElement.classList.remove('landscape')用于解锁屏幕方向和恢复样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值