泰安国强网络工作室专注于泰安网站建设/泰安手机网站建设/泰安网站优化/泰安微信营销等服务,是值得您信赖的泰安网络公司。

泰安网站建设热线13678683132
15269847585

泰安国强网络新闻中心

咨询,就免费赠送域名与服务器,咨询热线:13678683132当前位置: 网站首页 > 新闻动态 > 网站知识 >
联系我们
业务手机:13678683132
技术手机:15269847585
E-mail:a@taianx.com
地址: 泰安市五马路龙河商贸大厦3号楼313室

手机网站横屏竖屏css代码

文章来源:泰安国强网络 作者:泰安网站建设 时间:2016-05-05 13:50 点击:

泰安网站建设在做手机网站的时候,经常会涉及到屏幕的适配问题,以前的办法是判断手机的分辨率来的,经常是640px之类的判断,但是现在随着手机的分辨率越来越高,分辨率的花样越来越多,通过像素来判断实在是太麻烦了,所以今天的这篇文章就教给大家使用css的orientation属性来判断手机是竖屏还是横屏,这样写两套css就可以匹配了。
@media是css3中新定义的,功能非常强大,顾名思义PC是无法匹配横竖屏的,所以orientation只对移动设备起效。
 
1.头部声明
 
 
复制代码
代码如下:
 
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
 
加到
 
<head></head>
 
 
2. media匹配屏幕是横屏还是竖屏
 
代码如下:
 
@media all and (orientation : landscape) { </p> <p>/*  这是匹配横屏的状态,横屏时的css代码  */
body { 
 
@media all and (orientation : portrait){ </p> <p>/*  这是匹配竖屏的状态,竖屏时的css代码  */
body { 
background-color: #00ff00; 
 
 
3. 应用的地方
 
(1)手机WEB页面元素内容一般都是通过百分比定义的,以便能够在不同分辨率设备下都能正常显示,虽然这样,但是移动设备的屏幕分辨率宽度和高度相差还是很大,同样的页面在屏幕翻转过来时可能百分比定义的元素宽度会变得非常大,这样就会失去页面的美观性,这样,如果用orientation匹配屏幕的翻转状态,就可以写不同的css加以控制页面样式。
 
(2)对于有背景图的移动WEB页面,可以根据orientation匹配屏幕屏幕状态,设置不同的background。
 
(3)稍微有技术的一点:某些有绝对定位元素的WEB页面,将某元素定位到页面底部,当屏幕是竖屏状态时,可能因为页面总长度小于屏幕高度(但是大于屏幕宽度),这时将绝对定位元素定位到底部是正确的,但是当屏幕翻转成为横屏时,此时因为页面内容高度大于屏幕高度(就是未翻转时屏幕宽度),绝对定位元素会覆盖在页面内容之上,导致页面出现问题,这时可用orientation匹配屏幕状态,调整css代码。
 
关于匹配屏幕横竖屏状态还可通过JS判断,js中onorientationchange是window的一个事件,可以通过监听事件匹配屏幕横竖屏。

泰安国强网络工作室


  国强网络凭借多年的网站建设经验,坚持以“帮助中小企业实现网络全网营销”为宗旨,成功的为数千多家的中小企业实现互联网盈利,得到了客户的一致好评。如你有任何关于网站建设的疑问,请立即点击咨询国强网络资深营销专家或拨打免费咨询热线:13678683132,我们会详细为你一一解答你心中的疑难。 在线咨询

 

泰安国强网络能为您做什么

 

本文由 泰安网站建设 整理发布,本文地址为:https://www.taianx.com/news/web/760.html 转载请注明出处!

Copyright © www.taianx.com 泰安国强网络工作室 ALL RIGHT RESERVED. 鲁ICP备15029540号-1
地址:泰安市五马路龙河商贸大厦3号楼313室 邮编:271000 业务手机:13678683132 技术手机:15269847585 电话:0538-8203132 Mail:A@taianx.com
泰安网站建设公司-国强工作室专注于泰安网站建设、泰安手机网站制作、泰安营销型网站制作、泰安微信营销、泰安app开发等服务,是值得您信赖的泰安网络公司。 鲁ICP备15029540号-1
  • 泰安网站建设业务咨询
  • 泰安网站建设技术支持
  • 国强工作室官方微信
返回顶部