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

原创 2016年08月30日 17:00:26

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

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

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

        在正常情况下(手机不横屏使用),我进行了一个固定顶部的布局,效果如下所示:

       

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

    

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

       

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


(首次发表文章,文章记录结束了,撒花……赛高!!!)

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

vue-cli入门(一)——项目搭建

前言 vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建、打包、维护管理等都非常方便快捷。在开始项目之前,建议先熟悉vue.js基本语法。 ...

vue.js原生组件化开发(一)——组件开发基础

前言 vue作为一个轻量级前端框架,其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页...

移动端网页版强制横屏实例

  • 2017年08月23日 11:15
  • 30KB
  • 下载

移动端如何让页面强制横屏

原文地址:http://www.jianshu.com/p/9c3264f4a405 测试页面结构如下: lol 很简单对不对,最终的理想状态是,把lol非...

用css3解决移动端页面自适应横屏竖屏的思考

之前对于横屏的webapp做过一些尝试,但是始终不是很好的解决方案,前段时间又接触了类似的需求,尝试了感觉更好的解决方案。 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的例子还是平时常...

移动端如何让页面强制横屏

最近公司要开发一个移动端的养成类网页游戏(就是用手点各种按钮最后你会找到一个女朋友=。=),要求横屏显示,不能竖屏。 有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情。...

手机横屏下,输入框输入时被系统键盘遮挡处理方法

$('input').bind('click',function(e){     var $this = $(this);     e.preventDefault();     setTime...
  • cmm113
  • cmm113
  • 2015年08月25日 17:32
  • 1181

移动端判断横屏竖屏

可能我们在写移动端项目的时候会有要求或者为了更好的体验会做横竖屏检测,以达到更好的用户体验。 // 判断横竖屏 var utils = { debounce: function(func,d...

HTML5实战与剖析之判断移动端横屏竖屏功能

在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉,大家都经常头疼怎么才能判断这横屏和竖屏的状态呢,今儿梦龙就为大家分享分享。...

手机判定横屏或是竖屏

  • 2013年09月27日 14:50
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端关于手机横屏时样式修改
举报原因:
原因补充:

(最多只允许输入30个字)