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. IT兄弟连 Java语法教程 流程控制语句 分支结构语句1

    不论哪一种编程语言,都会提供两种基本的流程控制结构:分支结构和循环结构.其中分支结构用于实现根据条件来选择性地执行某段代码,循环结构则用于实现根据循环条件重复执行某段代码.Java同样提供了这两种流程 ...

  2. selectpage选择订单的时候,订单数量和金额会动态改变

    1. 2. HTML部分: JS: PHP获取数据并return json

  3. C# extract multiples from web pages based on OpenQA.Selenium.Chrome and ChromeDriver

    1.Install latest Chrome,Selenium.WebDriver, ChromeDriver Selenium.WebDriver 3.141.0; Selenium.WebDri ...

  4. hash算法原理及应用漫谈【加图版】

    原文:https://blog.csdn.net/Tencent_TEG/article/details/103021226 提到hash,相信大多数同学都不会陌生,之前很火现在也依旧很火的技术区块链 ...

  5. DB2 catalog 编目

    (步骤)ap用户: (1)进入db2 db2 (2)catalog database 命令 catalog db list (3)查看本地节点目录.IP.节点名.服务名称.目录条目类型 list no ...

  6. 顺F分享，你是在裸奔吗？

    " 对顺F旗下各APP顺藤摸瓜分析--顺F分享." 前文对顺F速运和顺F速运国际版进行了分析,二者使用同一套接口,虽然保护强度不高,但对代码和数据的保护却区别对待,实在让人诧异. ...

  7. python生产者和消费者模式实现(一)普通方式

    import timeimport randomfrom multiprocessing import Queue # 生产者def producer(q, num): for i in range( ...

  8. JavaScript—Json操作

    https://www.cnblogs.com/jimmyshan-study/p/11229373.html https://www.cnblogs.com/cailijuan/p/10150918 ...

  9. centos 的系统管理命令 service systemctl

    centos 的 systemctl 命令 systemctl is-enabled *.service     #查询服务是否开机启动 systemctl enable *.service    # ...

  10. C学习笔记（9）--- 预处理器，头文件

    1.预处理器: 预处理器不是编译器的组成部分,但是它是编译过程中一个单独的步骤.简言之,C 预处理器只不过是一个文本替换工具而已,它们会指示编译器在实际编译之前完成所需的预处理. 我们将把 C 预处理 ...