css  默认样式重置

 @charset "utf-8";

 *{margin:0;padding:0;}

 img {border:none; display:block;}

 em,i{ font-style:normal;}

 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, font { padding: 0; margin: 0; font-family:"微软雅黑"; }

 table { border-collapse: collapse; border-spacing: 0;}

 h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }

 ol, ul, li, dl, dt, dd { list-style: none; }

 input, button, textarea, checkbox, select, radio, form { vertical-align: top; }

 a{ color: #000; text-decoration: none; }

 a:link, a:visited { text-decoration: none; }

 a:hover{color:#cd0200;text-decoration:underline}

 input[type="submit"],  input[type="reset"],  input[type="button"],  button {

     -webkit-appearance: none;

 }

 html,body{height:100%}

移动端适配   rem.js

/**

 * YDUI 可伸缩布局方案

 * rem计算方式：设计图尺寸px / 100 = 实际rem  例: 100px = 1rem

 */

!function (window) {

    /* 设计图文档宽度 */

    var docWidth = 750;

    var doc = window.document,

        docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

    var recalc = (function refreshRem () {

        var clientWidth = docEl.getBoundingClientRect().width;

        /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */

        docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';

        return refreshRem;

    })();

    /* 添加倍屏标识，安卓为1 */

    docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);

    if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {

        /* 添加IOS标识 */

        doc.documentElement.classList.add('ios');

        /* IOS8以上给html添加hairline样式，以便特殊处理 */

        if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)

            doc.documentElement.classList.add('hairline');

    }

    if (!doc.addEventListener) return;

    window.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

}(window);

　　附：一个比较全面的css样式重置   https://blog.csdn.net/qq_35630674/article/details/96484307

移动端适配静态小demo （需引入上方css、rem.js）

css

 body{

     display:flex;

     flex-direction:column;

     height:100%;

 }

 /* head */

 header{

     height:1rem;

     background:#0dc441;

     display:flex;

     justify-content:center;

     align-items: center;

 }

 header span{

     display:block;

     width:1.5rem;

     height:.5rem;

     background:#64d985;

     text-align:center;

     line-height:.5rem;

     color:#fff;

     font-size:16px;

 }

 header span:nth-child(1){

     border-radius:1rem 0 0 1rem

 }

 header span:nth-child(2){

     border-radius: 0 1rem 1rem 0;

     background:#3dd067;

     color:#a3e9b7;

 }

 /* nav */

 nav{

     height:1rem;

     border-bottom:1px solid #d9d9d9;

     display:flex;

 }

 nav li{

     height:1rem;

     flex:1;

     text-align:center;

     line-height:1rem;

     font-size:14px;

     color:#666;

 }

 nav .active{

     border-bottom:2px solid #0dc441;

     color:#0dc441;

 }

 .made{

     flex:1;

     overflow:auto;

 }

 article{

     display:flex;

     flex-wrap:wrap;

     justify-content:space-between;

 }

 article figure{

     width:49.2%;

     border:1px solid #e5e5e5;

     margin-bottom:0.42rem;

 }

 article figure img{

     width:100%;

 }

 /* footer */

 footer{

     height:1rem;

     background:pink;

 }

html

 <body>

 <!-- head -->

     <header>

         <span>孙行者</span>

         <span>者行孙</span>

     </header>

 <!-- nav -->

     <nav>

         <li>孙悟空</li>

         <li class="active">猪八戒</li>

         <li>沙和尚</li>

     </nav>

 <!-- section -->

     <div class="made">

         <article>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

             <figure>

                 <img src="5.jpg" alt="">

             </figure>

         </article>

      </div>

 <!-- footer -->

     <footer>

     </footer>

 </body>

 </html>

css样式重置 移动端适配的更多相关文章

  1. css扁平化博客学习总结（二）css样式重置

    css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, block ...

  2. 分享一下自己在用的CSS样式重置代码

    通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添 ...

  3. 非常好用的CSS样式重置表

    非常好用的CSS样式重置表           我们在项目前期准备时都会准备好一个reset.css,因为不同浏览器对标签的解析各不相同,重置css样式可以让标签在不同浏览器下产生相同的效果.所以一个 ...

  4. css样式重置，不建议用通配符

    由于各个浏览器对css样式的默认样式不一致,所以有必要进行样式重置.在网上看到很多建议使用 *{margin:0;padding:0} 重置margin和padding.建议不这样子使用,原因主要是性 ...

  5. 常见网站CSS样式重置

    腾讯 1 2 3 4 5 6 7 8 9 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea, ...

  6. css样式重置（初始化）收集

    淘宝的样式初始化: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fields ...

  7. reset.css(样式重置)

    CSS Reset,意为重置默认样式.HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset).举几个例子:1.淘宝(CSS ...

  8. 封装好通用的reset.css base.css 样式重置css文件

    一般是叫reset.css 我这边命名成base.css 哎呀无所谓…… @charset "UTF-8"; /*css reset*/ /*清除内外边距*/ body, h1, ...

  9. css样式重置方案 -解决浏览器差异

    1.http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 2011 ...

随机推荐

  1. Mysql 5.7：更改密码时出现ERROR 1054 (42S22): Unknown column 'password' in 'field list'

    1.环境 在新服务器上重新安装了环境,原来是5.6的,就升级到了5.7版本. 2.问题 新安装的MySQL5.7,登录时提示密码错误,安装的时候并没有更改密码,后来通过免密码登录的方式更改密码. 输入 ...

  2. ansible小结（八）ansible-playbook简单使用

    ansbile-playbook是一系统ansible命令的集合,其利用yaml 语言编写,运行过程,ansbile-playbook命令根据自上而下的顺序依次执行.同时,playbook开创了很多特 ...

  3. 教妹学 Java：难以驾驭的多线程

    00.故事的起源 “二哥,上一篇<集合>的反响效果怎么样啊?”三妹对她提议的<教妹学 Java>专栏很关心. “这篇文章的浏览量要比第一篇<泛型>好得多.” “这是 ...

  4. 【HDU6037】Expectation Division（动态规划，搜索）

    [HDU6037]Expectation Division(动态规划,搜索) 题面 Vjudge 你有一个数\(n\),\(n\le 10^{24}\),为了方便会告诉你\(n\)分解之后有\(m\) ...

  5. three.js实现世界3d地图

    概况如下: 1.THREE.Shape绘制世界地图平面地图: 2.THREE.ExtrudeGeometry将绘制的平面沿着Z轴拉伸,实现3d效果: 效果图如下: 预览地址:three.js实现世界3 ...

  6. C#中对文件进行选择对话框打开和保存对话框进行复制

    场景 通过文件选择对话框选择文件 复制文件到指定路径 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教 ...

  7. 关于在 ASP.NET 的 Global.asax 中 Application_Error 方法内，设置跳转到自定义错误页无效的问题

    转自:https://www.cnblogs.com/OpenCoder/p/5070645.html 在 Global.asax 中的 Application_Error 方法中,使用 Respon ...

  8. Android框架Volley使用：Post请求实现

    首先我们在项目中导入这个框架: implementation 'com.mcxiaoke.volley:library:1.0.19' 在AndroidManifest文件当中添加网络权限: < ...

  9. 【XML】XPath表达式

    XPath简介 XPath即为XML路径语言(XML Path Language),它是一种用来确定XML文档中某部分位置的语言. XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力.起 ...

  10. PHP接口自动化测试框架实现

    在上一份工作中,我有一部分工作是在维护一套接口自动化测试,这一篇文章,我来介绍这套接口自动化框架的设计思路. 我们来看一个简单的PHP实现的超简单的接口. ... //报名验证 private fun ...