css的手机适配

【css的手机适配】的更多相关文章

在html篇里提到设置视口宽度和设备宽度,固定的meta配置就是写死的,==死记硬背== 应该清楚的是手机端的适配应该克服的难题就是宽度根据手机屏幕的大小变化,而高度却没有办法跟随比例变化,也就是宽高比,比如在手机上要一行上排列三个div放正方形的三个div,要怎么做,三个div浮动排列后各自设置width为33.3%,那高度呢,在pc端可以直接100*100,但是手机不行,不等比排列太难看了实现手机宽高比,就是手机端适配的终极目标现在最常见的宽高比方案有两个一个是rem 一个vw,vh的…

手淘的flexible.js解决手机适配问题

如何使用flexible.js做手机适配做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewport('视口'),就是这段代码<meta name="viewport" content="width=device-width,initial-scale=1.0">,因为flexible是通过js动态改变meta标签,类似代码如下: var metaE…

css 手机适配

手淘H5移动端适配方案flexible源码分析移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正在使用的适配方案. 这个适配方案是lib-flexible,在看这个源码的同时,我想先来回顾一下几个概念: 1. viewport 在移动设备上,viewport是设备屏幕用来显示我们网页的那一块区域,或者说是浏览器(或者Hybird App内的…

Bootstrap3简单好用，轻松实现手机适配

个人官网http://FansUnion.cn,前端使用Bootstrap框架.大部分的样式,轻松就实现了. 只是呢,关于导航条,被无数网友吐槽了. 通过手机访问时,导航条把屏幕给完全占居了,正文内容没有施展抱负的机会,很是遗憾. 在被网友和客户吐槽无数次之后,今天下午,公司同事又吐槽了一次.吐槽归吐槽,很多网友都提醒我改善下,至少有2个懂前端的GG,GG-pslong和公司同事GG-tuyang都给出了建议. 说实话,用Bootstrap做手机基本的适配,根本不难,官网上有demo.…

Android手机适配——UI图片适配

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/50727753 在Android项目当中,drawable文件夹都是用来放置图片资源的,不管是jpg.png.还是9.png,都可以放在这里.除此之外,还有像selector这样的xml文件也是可以放在drawable文件夹下面的. 但是如果你现在使用Android Studio来新建一个项目,你会发现有如下的目录结构: 对于刚刚从Eclipse转向Android Studio的开…

CSS：手机页面，常用字号和布局（工作中用）

{literal} {/literal} 公用css .cOrange,.cOrange:visited,.cOrange > a {color: #ff7200;} .border1-top{border-top:1px solid #ececec;} .border1-right{border-right:1px solid #ececec;} .border1-bottom{border-bottom:1px solid #ececec;} .border1-left{border-l…

利用Html.css OPPO手机导航菜单的制作解析

<body> <div id="top" class="auto"> <div class="nav"> <div class="left same"> <img src="images/mainnav_l.gif" /> </div> <div class="mainnav"> <img clas…

关于手机适配中的rem的学习随笔

githup 下载地址 :https://github.com/comjustforfun/remformobile adaptivejs利用rem解决移动端页面开发的自适应问题页面模板初始化的时候不用设置viewport标签,由js生成. 我们在head标签的顶部引入js,按以下方法使用即可最大优点: 计算html元素的font-size,使1rem等于100px,方便快速开发使用方法: 在页面head写入以下代码,实时更新html的fontsize: adaptive.js// 有缩放…

css横竖屏适配

Css做到横竖屏适配:定义两个样式 { @media screen and (orientation: portrait){ Css[竖向定义样式] } @media screen and (orientation: landscape){ Css[横向定义样式] } }…

js和css实现手机横竖屏预览思路整理

实现效果,如上图. 首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的: 一个手机页面在这里预览,要通过<iframe>标签,左边选择不同的select选项,通过监听select选项的值,在js中动态改变iframe的src来实现: 因为要实现横屏和竖屏的预览,切记,千万不能在点击横屏的时候,把竖屏的页面旋转90度,这样是没有效果的,因为预览页面的本身还是竖屏的,只是页面跟着一起旋转了90…