webapp中<meta>与css代码部署
1、页面头部标签申明
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" id="test">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--禁止浏览器缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />
<!--添加 MobileOptimized 标签，告知ios要以320像素的宽度渲染页面，以防在iPhone4s以下发生图片错位的问题-->
<meta name="MobileOptimized" content="">
<!--清除浏览器缓存-->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<!--iPhone 手机上设置手机号码不被显示为拨号链接）-->
<meta content="telephone=no, address=no" name="format-detection" />
<!--IOS私有属性，可以添加到主屏幕-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--屏幕顶部条的颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <title>手机webApp</title>
<!--让IE8，IE9，支持CSS3伪类和属性选择器-->
<!--[if lte IE ]>
<script src="scripts/selectivizr.js"></script>
<![endif]-->
<!--让IE9以下的浏览器支持Html5标签和媒体查询器（主要用于响应式网站开发）-->
<!--[if lt IE ]>
<script src="scripts/css3-mediaqueries.js"></script>
<script src="scripts/html5shiv.js"></script>
<![endif]-->
</head>
2、css中解决手机WebApp字体和图片等标签问题
/* 禁用iPhone中Safari的字号自动调整 */
html { -webkit-text-size-adjust: none; }
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* 设置图片视频等自适应调整 */
img { max-width: %; height: auto; width: auto9; /* ie8 */ }
.video embed, .video object, .video iframe { width: %; height: auto; }
3、css重置样式
参考：http://www.cnblogs.com/caojiayan/p/6343917.html
/* CSS Document */
html, body, div, span, object, iframe,h1, h2,
h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn,
em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd,
ol, ul, li,fieldset, form, label, legend,table, caption, tbody,
tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary,time, mark,
audio, video {
margin:;
padding:;
border:;
outline:;
font-size:%;
vertical-align:baseline;
background:transparent;
outline-style:none;/*FF*/
} body {
line-height:;
} a{
margin:;
padding:;
border:;
font-size:%;
vertical-align:baseline;
background:transparent; }
a:hover,a:focus{
text-decoration:none;
bblr:expression(this.onFocus=this.blur());/*IE*/
outline-style:none;/*FF*/
}
table {
border-collapse:collapse;
border-spacing:;
} input, select {
vertical-align:middle;
} /*css为clearfix，清除浮动*/
.clearfix::before,
.clearfix::after{
content: "";
height: ;
line-height: ;
display: block;
visibility: hidden;
clear: both;
}
.clearfix:after{clear:both;}
.clearfix{
*zoom:;/*IE/7/6*/
}
4、关于不同设备的媒体查询
/*
* -----------------------------------------
* 320 ~ 480
* -----------------------------------------
*/
@media only screen and (min-width: 320px) and (max-width: 480px) { } /*
* -----------------------------------------
* 321 ~ 宽大于321的设备
* -----------------------------------------
*/
@media only screen and (min-width: 321px) { } /*
* -----------------------------------------
* ~ 320 宽小于320的设备
* -----------------------------------------
*/
@media only screen and (max-width: 320px) { } /*
* -----------------------------------------
* ~ 480 宽小于480的设备
* -----------------------------------------
*/
@media only screen and (max-width: 480px) { } /* medium screens (excludes iPad & iPhone) */
/*
* -----------------------------------------
* 481 ~ 767 宽大于480且小于767的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-width: 481px) and (max-width: 767px) { } /* ipads (portrait and landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { } /* ipads (landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { } /* ipads (portrait) */
/*
* -----------------------------------------
* 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { } /*
* -----------------------------------------
* 1444 ~ 1824 宽大于1444且小于1824的设备
* -----------------------------------------
*/
@media only screen and (min-width: 1444px) and (max-width: 1824px){ } /*
* -----------------------------------------
* 1824 ~ 宽大于1824的设备
* -----------------------------------------
*/
@media only screen and (min-width: 1824px) { } /*
* -----------------------------------------
* 2224 ~ 宽大于2224的设备
* -----------------------------------------
*/
@media only screen and (min-width: 2224px) { } /* iphone 4 and high pixel ratio (1.5+) devices */
/*
* -----------------------------------------
* iphone4 ~
* -----------------------------------------
*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { } /* iphone 4 and higher pixel ratio (2+) devices (retina) */
@media only screen and (-webkit-min-device-pixel-ratio: ), only screen and (min-device-pixel-ratio: ) { }
webapp中<meta>与css代码部署的更多相关文章
- 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验
转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...
- webapp中的meta
<!--开发后删除--> <meta http-equiv="Pragma" name="no-store" /><!--必须联网 ...
- 在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验
一:Sublime Text 中需要先安装Package Control.(如果有则无需安装) 安装方法:打开Sublime Text控制台(快捷键Ctrl+`),在控制台粘贴以下代码,按回车执行. ...
- 在sublimen中整理CSS代码及其兼容性问题
1,使用鼠标选中前面浅灰色缩进. 2,Ctrl+H 查找替换 点击 Find All 查找全部缩进. 3,按backspace向后删除两次,如下图所示: 4,向下按一次方向键,再向左按一次方向键,最 ...
- Dreamweaver 中CSS代码格式化
首先,用DW打开一个已经写好的css文件,看一下编辑好的,没有格式化之前的代码的样子. 然后,我们点击软件窗口上方的“命令”选项,在弹出的菜单中点击“应用源格式”选项,就可以将我们的代码格式化. ...
- grunt-css-sprite css 代码中的切片合并
安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css ...
- 将html代码部署到阿里云服务器，并进行域名解析，以及在部署过程中遇到的问题和解决方法
本博客主要是说一下,,如何将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法. 1.先在阿里云上购买一台阿里云服务器(ECS云服务器): 2.远程连接上该服务器,在 ...
- Eclipse中的Web项目自动部署到Tomcat的webapp目录下
Eclipse中的Web项目自动部署到Tomcat 原因 很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的很快,但记忆总是很模糊,偶尔犯错,以前很少写 ...
- 移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂
为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例gi ...
随机推荐
- 【luoguP4721】分治 FFT
description 给定长度为\(n-1\)的数组\(g[1],g[2],..,g[n-1]\),求\(f[0],f[1],..,f[n-1]\),其中 \[f[i]=\sum_{j=1}^if[ ...
- STM32硬件错误HardFault_Handler的处理方法
https://blog.csdn.net/electrocrazy/article/details/78173558
- SP1296 SUMFOUR - 4 values whose sum is 0
传送门 解题思路 四个数组一起做有点炸.先把他们合并成两个数组,然后让一个数组有序,枚举另一个数组的元素,二分即可.时间复杂度\(O(n^2logn^2)\) 代码 #include<iostr ...
- 搞大数据，你不懂这三大数据处理趋势就OUT了
搞大数据,你不懂这三大数据处理趋势就OUT了 企业数据每年以PB级甚至上百PB爆炸式增长,越来越大的数据量正为扩大分析策略在企业应用软件领域的拓展提供了数据基础,但数据的价值是有时效性的,越早分析越能 ...
- Docker系列(六)：Docker网络机制(下)
Linux Namespace详解 namespace:是一个空间,空间里可以放进程,文件系统,账号,网络等,某个资源被放到namespace之后 别人就看不到他了. 可以看到有两个namespace ...
- iconfont 在vue项目中的应用（icon-component组件）
前言:上一篇记录了iconfont的三种基本使用方法. 在Vue中应该如何使用呐?Vue中的组件化思想很明确,要提高组件的复用率,增强项目的可维护性,扩展性.以下是采用icontfont的使用方式之s ...
- Python - Virtualenv 创建虚拟环境
Virtualenv 回到顶部 为了解决各个项目的共同依赖同一个环境,造成版本冲突等,virtualenv创建一个干净的环境,在这个环境下,进行Python项目的开发等,就成为一个个独立的项目,从而避 ...
- <Django> MVT三大块之Template(模板)
1.模板简介 创建项目,基本配置 第一步:配置数据库 第二步:创建APP,配置APP 第三步:配置模板路径 第四步:配置分发urls.py(APP里面的) 根目录下,增加命名空间namespace,作 ...
- 面试系列10 es生产集群的部署架构
如果你确实干过es,那你肯定了解你们生产es集群的实际情况,部署了几台机器?有多少个索引?每个索引有多大数据量?每个索引给了多少个分片?你肯定知道! 但是如果你确实没干过,也别虚,我给你说一个基本的版 ...
- LeetCode 14.最长公共前缀(Python3)
题目: 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow& ...