手机站CSS
手机web——自适应网页设计(html/css控制) 内核:
-ms- /* IE 9 */
-moz- /* Firefox */
-webkit- /* Safari and Chrome */
-o- /* Opera */ 一. 网页宽度自动适应手机屏幕的宽度,在head标签内加上以下内容: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=1.0:表示最小的缩放比例
maximum-scale=1.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例 二. 不使用绝对宽度 1)不能指定像素宽度:
width:xxx px; 2)只能指定百分比宽度:
width: xx%;
或者:width:auto; 3)例:宽度
width:74%;min-width:236px;opacity:0 三. 相对大小的字体 字体不能使用绝对大小(px),而只能使用相对大小(em)。
body {font: normal 100% Helvetica, Arial, sans-serif;} 字体大小是页面默认大小的100%,即16像素。 像素(px)与倍数(em)的转换; xx(em)=yy(px)/16; xx(px) = yy(em)*16; 实例:12/16 = 0.75em; 0.875em*16 = 14px; 四. 流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
.container {width: 70%;margin:auto; }
.col1,col2,col3,col4 {float: left;width:25%;} 五. Media Query模块 1)加载*.css文件
<link type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" /> 2)在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px); 六. CSS的@media规则 @media screen and (max-device-width: 400px) {
.*{}
#*{}
} @media only screen and (max-width: 1200px) and (min-width:1024px){ } 七、竖屏与横屏的样式 1)竖屏时使用的样式
@media all and (orientation:portrait) {.css{}} 2)横屏时使用的样式
@media all and (orientation:landscape) {.css{}} 八. 图片的自适应(fluid image) img, object { max-width: 100%;} IE的专有命令
img { -ms-interpolation-mode: bicubic; } 九、手机拍照和上传图片 1)选择照片
<input type=file accept="image/*"> 2)选择视频
<input type=file accept="video/*"> 十、消除transition闪屏 .css{
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-transform-style: preserve-3d;
/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
-webkit-backface-visibility: hidden;
} 十一、开启硬件加速 解决页面闪白,保证动画流畅 .css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 十二、背景图自适应高宽 .css{background:url(img.jpg) no-repeat center center; background-size:100% auto;} 十三、字体引用 @font-face {
src: url('../en.eot');
url('../en.woff') format('woff'),
} 十四、盒子:
box-sizing:border-box;margin:0;padding:0 十五、清除:
.clear{clear:both;display:block;}
.clearfix:before,.clearfix:after{content:'.';display:block;}
.clearfix:after,{clear:both;}
.clearfix{zoom:1;} 十六、关于css3新特性 1)text-overflow 不显示省略标记,而是简单的裁切条
.tit{text-overflow:clip; overflow:hidden; white-space:nowrap;} 当对象内文本溢出时显示省略标记
.tit_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} 2、圆角 border-radius: xxpx; 3、文本
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-break 规定非中日韩文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3、边框 border-image 设置所有 border-image-* 属性的简写属性。
border-radius 设置所有四个 border-*-radius 属性的简写属性。
box-shadow 向方框添加一个或多个阴影。 4、背景: background-size 大小
background-origin 区域(content-box) 案例:layout.css @charset "utf-8";/*1em=16px 1px=0.0625px*/
/* `Basic HTML----------------------------------------------------------------------------------------------------*/
body{font:0.75em "微软雅黑",Arial,"Liberation Sans",FreeSans,sans-serif; background:#99cc99;}
body, html {font-size: 100%;padding: 0;margin: 0;}
pre,code{font-family:"DejaVu Sans Mono",Menlo,Consolas,monospace;}
hr{border:0 solid #ccc;border-top-width:1px;clear:both;height:0;}
img, object { max-width: 100%; -ms-interpolation-mode: bicubic; }
/* `Headings----------------------------------------------------------------------------------------------------*/
h1{font-size:2.5em;}
h2{font-size:2.3em;}
h3{font-size:2.1em;}
h4{font-size:1.9em;}
h5{font-size:1.7em;}
h6{font-size:1.5em;}
/* `Spacing----------------------------------------------------------------------------------------------------*/
ol{list-style:decimal;}
ul{list-style:none;}
ul,li,ol,dl,dd,p,hr,h1,h2,h3,h4,h5,h6,pre,table,address,fieldset,figure{margin:0px;padding:0px;}
a,a:hover{ text-decoration:none;outline:none;color:#333; cursor:pointer;}
*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.fl{ float:left; display:inline;}
.fr{ float:right; display:inline;}
.tl{ text-align:left;}
.tc{ text-align:center;}
.tr{ text-align:right;}
.pr{ position:relative;}
.pa{ position:absolute;}
.none{ display:none;}
.db{ display:block;}
.mt10{ margin-top:10px;}
/* `Container----------------------------------------------------------------------------------------------------*/
.container,header{margin-left:auto;margin-right:auto;width:100%;-moz-box-align:center;-webkit-box-align:center;box-align:center;-moz-box-pack:center;-webkit-box-pack:center;box-pack:center}
/*
@media (max-width: 800px) {.container{width:674px;}}
@media (min-width: 800px) and (max-width: 1204px) {.container {width:800px;background:#333;}}
@media (min-width: 1204px) and (max-width: 1280px){.container {width:1204px;}}
@media (min-width: 1280px) and (max-width: 1360px){.container {width:1204px;}}
@media (min-width: 1360px) and (max-width: 1366px){.container {width:1360px;}}
@media (min-width: 1366px) and (max-width: 1440px){.container {width:950px;}}
@media (min-width: 1440px) and (max-width: 1600px){.container {width:1440px;}}
@media (min-width: 1600px) and (max-width: 1680px){.container {width:1500px;}}
@media (min-width: 1680px) and (max-width: 1920px){.container {width:1450px;}}
*/
.fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}
.row {margin-right: -15px;margin-left: -15px;}
/* `Grid >> Global----------------------------------------------------------------------------------------------------*/
.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{display:inline-block;float:left;}
/* `Grid >> Children (Alpha ~ First,Omega ~ Last)----------------------------------------------------------------------------------------------------*/
.alpha{margin-left:0;}
.omega{margin-right:0;}
/* `Grid >> 12 Columns----------------------------------------------------------------------------------------------------*/
.container .col1,header .col1{width:8.33333333%;}
.container .col2,header .col2{width:16.66666667%;}
.container .col3,header .col3{width:25%;}
.container .col4,header .col4{width:33.33333333%;}
.container .col5,header .col5{width:41.66666667%;}
.container .col6,header .col6{width:50%;}
.container .col7,header .col7{width:58.33333333%;}
.container .col8,header .col8{width:66.66666667%;}
.container .col9,header .col9{width:75%;}
.container .col10,header .col10{width:83.33333333%;}
.container .col11,header .col11{width:91.66666667%;}
.container .col12,header .col12{width:100%;} /* `Clear Floated Elements----------------------------------------------------------------------------------------------------*/
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clearfix:before,.clearfix:after,.container:before,.container:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;}
.clearfix:after,.container:after{clear:both;}
.clearfix,.container{zoom:1;}
手机站CSS的更多相关文章
- dede织梦手机站m文件夹功能基础详解
织梦2015年6月8日更新后,就添加了很多针对手机移动端的设计,最大的设计就是添加了生成二维码的织梦标签和织梦手机模板功能,织梦更新后,默认的 default模板中就包含手机模板,所以我们可以给织梦网 ...
- 用PHPcms V9四步完成WAP手机站搭建
用PHPCMS最新发布的V9搭建了ONOW中文网,WEB网站(www.onow.cn)完成后,有用户提供手机访问的问题, 于是着手搭建ONOW手机WAP站(3g.onow.cn). 用PHPCMS V ...
- ECSHOP通过改变模板路径制作手机站
ECSHOP通过改变模板路径制作手机站 前提:不使用ECSHOP自带的mobile目录程序来制作手机站. 目的:手机站做成自动识别,通过改变模板路径来显示PC站或手机站. 待续
- 嗨分享-前端技术-帝国CMS手机站修改列表分页(sysShowListMorePage)
http://bbs.phome.net/showthread-31-318753-0.html 如果你的网站使用的是帝国CMS.PC站和手机站各使用一个模板组,但共同使用一个数据库.那么你的PC站和 ...
- MVC 增加手机站
首先在全局路由(RouteConfig)中加入以下图片中的代码.
- js手机站跳转
var yunzhuanhua_pc_domain = "http://www.域名.com#yht"; //PC站网址var yunzhuanhua_wap_domain = & ...
- HTML5做手机站页面字体显示很小的解决方法
HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...
- phpcmsV9手机站内容页有时内容不显示
phpcmsV9手机站内容页有时内容不显示,修改的办法是: 在文件phpcms\modules\wap\index.php 中 屏蔽第119行,即如下内容 //$content = $contentp ...
- dedecms手机站图片错误的解决方法
现在手机站(如m.*.com)是网站建设标配,在用dedecms建站也可以实现(不会的话欢迎来骚扰ytkah),手机站一个比较麻烦的事是图片一直显示不出来,为什么呢?程序一般是调用图片的相对地址,比如 ...
随机推荐
- hibernate 注解 联合主键映射
联合主键用Hibernate注解映射方式主要有三种: 第一.将联合主键的字段单独放在一个类中,该类需要实现java.io.Serializable接口并重写equals和hascode,再将 该类注解 ...
- Unity声音-音源组件
音源组件(AudioSource) 音源是场景中在某个位置的发声装置,好像一个喇叭.它播放着音频片段 (Audio Clip). 发出的声音将输出到声音监听器(audio listener),或者声音 ...
- java 解压zip java.lang.IllegalArgumentException: MALFORMED 错误
ava.lang.IllegalArgumentException: MALFORMED at java.util.zip.ZipCoder.toString(Unknown Source) at j ...
- PL/SQL报错:Initialization error Oracle client not properly installed
安装PL/SQL8.4后,连接数据库 提示错误Initialization error Oracle client not properly installed 解决方案: 1.下载instancec ...
- LinkedList中将对象按照某一属性排序
例如,链表 treelist 声明如下: LinkedList<TreeNode> treelist = new LinkedList<TreeNode>(); 其中 Tree ...
- Java Date 时分秒置0
Date now = new Date(); Calendar cal1 = Calendar.getInstance(); cal1.setTime(now); // 将时分秒,毫秒域清零 cal1 ...
- 开源项目MultiChoiceAdapter详解(六)——GridView和MultiChoiceBaseAdapter配合使用
这篇其实没啥重要的,主要就算是个总结吧. 一.布局文件 这里实现的是类似于上图的多图选择的效果.关键在于item布局文件的写法.这也就是这个框架奇葩的一点,莫名其妙的要在一个自定义控件里面再放一个自定 ...
- Button 在布局文件中定义监听器,文字阴影,自定义图片,代码绘制样式,添加音效的方法
1.Button自己在xml文件中绑定监听器 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro ...
- springboot 表单校验
实体: @Entity public class User implements Serializable { /** * 编号 */ @Id @GeneratedValue private Long ...
- 可重入读写锁ReentrantReadWriteLock基本原理分析
前言 本篇适用于了解ReentrantLock或ReentrantReadWriteLock的使用,但想要进一步了解原理的读者.见于之前的分析都是借鉴大量的JDK源码,这次以流程图的形式代替源码,希望 ...