响应式布局通用

原创 2015年09月06日 17:39:35
@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0;}
body { background:#fff; color:#555; font-size:12px; font-size:1.2rem;font-family:"Microsoft YaHei",微软雅黑,Verdana,Helvetica,Arial,sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline;text-decoration:none; }
img { border:none; }
ol,ul,li { list-style:none; }
table { border-collapse:collapse; }
html {overflow-y: scroll;} 
*{box-sizing: border-box;}
/*通用*/
.comWidth { width:100%; margin:0 auto; }
.fl { float:left;}
.fr { float:right;}
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; } 
.clearfix:after {content:"";display:table;clear:both;} 
.clearfix { *zoom:1; } 
.bordernone { border:none !important;}
.carousel-indicators { z-index:3;}
/*用来放字体库引入的*/
@font-face {font-family: 'iconfont';
    src: url('../fonts/iconfont.eot'); /* IE9*/
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
    url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:2.5rem;font-style:normal; 
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

/*媒体查询*/
/*media*/
@media (min-width: 500px) and (max-width: 640px) {
  html {
    font-size: 60%; } }
@media (min-width: 400px) and (max-width: 500px) {
  html {
    font-size: 55%; } }
@media (min-width: 340px) and (max-width: 400px) {
  html {
    font-size: 50%; } }
@media all and (max-width: 340px) {
  html {
    font-size: 46%; } }

简化后续工作,打造一个通用的fragment

先在开发的项目和微信这个界面差不多的。由底部的导航栏+中间内容+顶部组成。当然可能有的时候多了一个滑动菜单在左边或者右边。 那么这个主界面实现的方式也是底部的四个选项按钮和上方内容组成。其实上方就是...
  • u014315849
  • u014315849
  • 2016年03月18日 15:49
  • 584

【Android】通用系列 —— 用简单通用的方式操作ListView

【关键词】 通用系列 ListView 【问题】 在使用ListView的过程中,总是不断的重复写Adapter,ViewHolder等代码,很繁琐;想个办法,不论是简单的Ite...
  • ly1414725328
  • ly1414725328
  • 2016年05月07日 11:38
  • 1550

【android基础篇之二】结合DroidDraw工具谈Android的几种常用布局(layout)

Android常用的布局有: 线性布局(LinearLayout):线性布局简单实用,通过Orientation属性来控制整个屏幕的布局。Orientation有水平(horizontal)和垂直...
  • zhurui536
  • zhurui536
  • 2013年10月25日 11:20
  • 1306

移动端响应式布局通用代码

移动端响应式布局通用代码
  • aVeCathleen
  • aVeCathleen
  • 2015年12月08日 18:09
  • 945

控件布局通用解决方案

你是否遇到过这样的问题:用编译器拖出一些控件放到对话框上,并合理安排好了位置;但编译运行,改变对话框的大小后,所有控件的位置都乱了,让人感觉非常糟糕。如果控件不太多,你可以尝试手写代码定位每个控件的位...
  • BeanJoy
  • BeanJoy
  • 2013年06月21日 16:27
  • 3493

15 个 Android 通用流行框架大全

1. 缓存 名称 描述 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 名称 描...
  • u014651216
  • u014651216
  • 2016年05月27日 09:54
  • 743

控件布局通用解决方案

博客原地址:http://blog.csdn.net/beanjoy/article/details/9146375 ,感谢原博主。 原文: 你是否遇到过这样的问题:用编译器拖出一些控件放...
  • zuoyefeng1990
  • zuoyefeng1990
  • 2016年04月20日 14:47
  • 280

css布局通用类

工作中做了不少的网页,感觉每个网页大都具备相似之处,尤其是手机端的,今天我把工作中使用得最多的定义到base.css文件中,主要针对的是移动端设备,运用了rem这个css3的单位,希望能提高以后的工作...
  • neomwang
  • neomwang
  • 2016年07月07日 09:04
  • 156

Android UI 之 我的页面 圆形图片+通用item封装(简化代码量)

一丶效果演示 二丶功能点技术点 1.圆形图片,mipmap图片处理,canvas绘图 2.通用item封装,三种形式,一句话替代繁琐布局和重复代码 三丶核心代码讲解 1.圆形图片 /** * ...
  • DT235201314
  • DT235201314
  • 2017年08月08日 14:11
  • 2980

自定义View之MultiStateView根据不同状态显示不同布局的View(雷惊风)

想成为大牛就必须扫清研发道路上的每一个障碍,其中自定义控件这个障碍相信对于初上路者来说就是一个不小的障碍,今天就跟大家一起来一步一步的写一个自定义控件,支持通过设置不同状态在界面上显示不同布局,多用于...
  • liuyonglei1314
  • liuyonglei1314
  • 2017年05月24日 11:47
  • 202
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:响应式布局通用
举报原因:
原因补充:

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