自适应模板

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>tital</title>
</head>
<script>
    // 统一手机与PC 尺寸使用rem，100像素等于 1rem 
    (function () {
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth < 1200) {
            document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
        } else {
            document.documentElement.style.fontSize = '100px';
        }
    })()
    window.onresize = function(){
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth < 1200) {
            document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
        } else {
            document.documentElement.style.fontSize = '100px';
        }
    }
</script>
<style>

</style>
<body>

</body>
<script src="script/jquery-1.9.1.min.js"></script>
<script>
    function init(){
        if ($(window).width() > 1200) {
            // 大于1200像素 图片显示等操作
        } else {
            // 小于1200像素 图片显示等操作
        }
    }
    init();
    $(window).resize(function () {
        init();
    })
</script>
</html>

自适应常用方法

// 小于600px 引入的CSS文件
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

// 各种媒介查询
/*超小屏幕设备 手机*/
@media (max-width: 768px) {}
/*小屏幕设备 平板*/
@media (min-width: 768px) and (max-width: 992px) {}
/*中等屏幕设备 桌面*/
@media (min-width: 992px) and (max-width: 1200px) {}
/*大屏幕设备 桌面*/
@media (min-width: 1200px) {}
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

// 图片指定的最大宽度为百分比
img { width: auto; max-width: 100%; }

// 根据宽度设置图片
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" >
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

CSS样式

<!-- 基本配置 -->
html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea,button,h1,h2,h3,h4,h5,h6,p{
    margin:0;
    border:0;
    padding:0;
    font-style:normal;
    box-sizing:border-box;
}
nav,article,aside,details,main,header,footer,section,fieldset,figcaption,figure{
    display:block;
}
img,a,button,em,del,strong,var,label,cite,small,time,mark,code,textarea{
    display:inline-block;
}
header,section,footer{
    position:relative;
}
ol,ul{
    list-style:none;
}
span{
    display:inline-block;
}
<!-- 其他设置 -->
html,body{
    <!-- IOS浏览器 禁用系统默认菜 单-->
    -webkit-touch-callout:none;
    <!-- 文本大小不会根据设备尺寸进行调整 -->
    -webkit-text-size-adjust:none;
    <!-- 取消移动端上点击链接或元素事件时上的高亮 -->
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    <!-- 是否允许用户选中文本 -->
    -webkit-user-select:none;
}

<!-- 统一移动端 安卓与IOS上按钮的默认样式 -->
input[type="button"],input[type="submit"],input[type="reset"],button{
    -webkit-appearance:none;
}
input{
    cursor:pointer;-webkit-appearance:none;
}
textarea{
    -webkit-appearance:none;-webkit-tap-highlight-color:transparent;
}
input:focus,textarea:focus{
    outline:none;
}
a{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color:transparent;
    outline:none;
}
a:active,a:hover{
    outline:0;
}
a,a:visited{
    text-decoration:none;
}

HTML 自适应基本模板与基本方法

自适应模板

自适应常用方法

CSS样式