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. oracle视图和索引

    视图和索引 视图 视图的作用 控制数据访问.简化查询.避免重复访问相同的数据 视图的优点 限制用户只能通过视图检索数据,用户看不到底层基表 注意事项 视图可以理解为临时表,会随着真实表的数据变化而自动 ...

  2. docker-mysql-使用docker运行mysql8

    1, 下载镜像, 我用的是8 docker pull mysql: 2, 启动镜像 docker run \ --name mysql8 \ -p : \ -v /Users/wenbronk/Con ...

  3. 【CodeChef】Find a special connected block - CONNECT（斯坦纳树）

    [CodeChef]Find a special connected block - CONNECT(斯坦纳树) 题面 Vjudge 题解 还是一样的套路题,把每个数字映射到\([0,K)\)的整数, ...

  4. Java8接口新特性

    概述 Java 8中,你可以为接口添加静态方法和默认方法.从技术角度来说,这是完全合法的,只是它看起来违反了接口作为一个抽象定义的理念.猜想设计初衷可能使为了兼容8以下的jdk Java8出来了个函数 ...

  5. [反汇编]函数开始部分利用mov ebx,esp找到返回地址(_KTRAP_FRAME结构）

    我们理解call原理,首先将返回地址压入栈中,之后执行调用. 因此,在一个函数开始部分,esp依旧是上一个栈帧的esp,此时esp指向返回地址. 这就意味着使用 mov ebx,esp,之后 [ebx ...

  6. .NET MVC5简介（四）Filter和AuthorizeAttribute权限验证

    在webform中,验证的流程大致如下图: 在AOP中: 在Filter中: AuthorizeAttribute权限验证 登录后有权限控制,有的页面是需要用户登录才能访问的,需要在访问页面增加一个验 ...

  7. 致Python初学者的六点建议

    Python是最容易学习的编程语言之一,其语法近似英语.通常,初学者只会遇到一些小麻烦,如强制缩进.在函数中使用self等. 然而,当开始阅读.复制和编辑他人代码时,麻烦就接踵而至了. 这里,我将解释 ...

  8. linux tmux用法

    1. 安装工具 Centos : yum install tmux 2. 基本操作 新建会话:tmux new -s session-name 查看会话:tmux ls 进入会话:tmux a -t  ...

  9. Javase之多线程（2）

    多线程(2) 线程的生命周期 新建:创建线程对象 就绪:有执行资格,没有执行权 运行:有资格运行,有执行权 ​ 阻塞:由一些操作让线程处于改状态.没有执行资格,没有执行权,而通过另一些操作激活它,激活 ...

  10. Dynamics CRM中的注释(Note)及RollupRequest消息初探

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复161或者20151015可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 注释,这个实体的架构名称是Ann ...