移动端关于手机横屏时样式修改

最近公司做了个微信项目，对于几乎没接触过移动端的菜鸟来说是还真是……

不过不管是否接触过，都得努力实现各种需求呐。于是，本座就先定下个小目标：完美完成这次的移动端项目（呵呵←_←）。不知道前端的童鞋们是否遇到过这样的情况，当我们辛苦开发的页面，经过测试也觉得是无任何兼容问题的时候，心情是那个happy啊，然而突然某一测试人员把手机横过来测试，各种问题就来了，弹窗内容显示不全、布局错乱、固定区域占比大……看这效果，宝宝整个人都不好了！

蛮多方法通过js来实现手机横屏时的各种操作，但是在这里我要说的是一种通过css来实现移动端横屏时展示效果的方法。这里我举的栗子是一个固定区域显示的栗子。

在正常情况下（手机不横屏使用），我进行了一个固定顶部的布局，效果如下所示：

然后我希望横屏的时候显示为如下效果：

由此来实现横屏的时候固定顶部的区域的所占地方减小。那么关键的样式代码只要通过 @media来实现横屏是修改对应的样式了详细看如下代码为手机横屏是对应调用到的样式。

即关键主要用@media screen来实现我们页面的自适应啦，而且@media screen 对移动端也很友好，又无需使用插件，是不是用的很爽啊。代码中的landscape就是标识着当手机横屏时会识别里面的样式而不适用正常情况下的样式啦。使用起来简单快捷。

（首次发表文章，文章记录结束了，撒花……赛高！！！）

移动端关于手机横屏时样式修改相关推荐

阿泽CSS踩坑系列（二）-解决安卓端手机横屏后图片比例失调，需要刷新才能恢复正常的问题。（华为手机浏览器）
问题描述:开发个人博客摄影版块的时候,横屏时图片出现了拉伸,点击下一张图片再点回来就能恢复正常.(理想状态:保持宽高比,当高度或者宽度达到最大时,停止缩放) 我们看一下竖屏时的图片: 嗯,完美,没有什 ...
android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题
先森在完成网站自适应的过程中,遇到了很多大大小小的问题,其中一个问题就是横屏字体变大的问题.这个问题一碰到感觉很麻烦,其实解决方法却很简单. 网页自适应解决iPhone手机横屏字体变大问题网上搜索结 ...
Python可视化matplotlib自定义：运行时参数修改、自定义样式、默认样式+plt.style.use()
Python可视化matplotlib自定义:运行时参数修改.自定义样式.默认样式+plt.style.use() 目录 Python可视化matplotlib自定义:运行时参数修改.自定义样式.默认 ...
在H5移动端开发强制竖屏，横屏时提示
1.不同的浏览器有不同的做法,参考如下:  <meta name="screen-orientation" content=&quo ...
移动端判断手机横竖屏状态
禁用用户自动缩放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
移动端web开发技巧-及样式修复
2019独角兽企业重金招聘Python工程师标准>>> 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(I ...
网页移动端给页面横屏提示
大家都知道,我们在做移动端的网页时,设计及实现时,都会以竖屏或者横屏中的一种方式进行设计与实现,所以,为了使用户拥有更佳的体验,我们最好就是给网页加一个横屏或者竖屏提示.这里我们以横屏提示为例进行解析 ...
ios 系统状态栏样式修改_iOS 一种新的修改导航栏样式的方法（支持iOS10）.
iOS 一种新的修改导航栏样式的方法. 开宗明义: 对系统导航栏最底层的UIView加一层CALayer, 通过操作这个自己创建的CALayer来修改导航栏样式. 修改系统导航栏样式的几种方法 1.使 ...
audio标签的样式修改
由于H5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比较简单 ...

移动端关于手机横屏时样式修改

移动端关于手机横屏时样式修改相关推荐

最新文章

热门文章