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. 微信小程序反编译

    看到一个有意思的小程序,想了解是如何实现的,于是找了反编译方法. 安装adb驱动 百度安装adb驱动, 设计设置开发者模式,连接电脑. -> % adb devices List of devi ...

  2. Spring Boot 2.X整合Spring-cache，让你的网站速度飞起来

    计算机领域有人说过一句名言:“计算机科学领域的任何问题都可以通过增加一个中间层来解决”,今天我们就用Spring-cache给网站添加一层缓存,让你的网站速度飞起来. 本文目录 一.Spring Ca ...

  3. Web前端基础(2):HTML(二)

    1. body中的相关标签 1.1 标题标签:hn HTML提供<hn>系列标签,用于修饰标签,包含:<h1>.<h2>.<h3>.<h4> ...

  4. 计科菜鸟玩生信（一）——Windows10下用docker安装GATK

    1.官网下载GATK. (学校网速实在是太慢了,下载几个小时到自闭) 下载地址:https://software.broadinstitute.org/gatk/download/ 下载完成后文件夹中 ...

  5. UIImageView三种方式 和 位置分布

    typedef NS_ENUM(NSInteger, UIViewContentMode) { UIViewContentModeScaleToFill, //为将图片按照整个区域进行拉伸(会破坏图片 ...

  6. 【Android】Context的使用

    Android开发经常需要使用Context来启动Activity,或者打开SharedPreferences,或者构建一个Dialog.最近老是用到getContext(),getApplicati ...

  7. 3.智能快递柜(通信篇-HTTP)

    1.智能快递柜(开篇) 2.智能快递柜(终端篇) 3.智能快递柜(通信篇-HTTP) 4.智能快递柜(通信篇-SOCKET) 5.智能快递柜(通信篇-Server程序) 6.智能快递柜(平台篇) 7. ...

  8. ubuntu 安装elasticsearch

    elasticsearch简介  环境准备 elasticsearch:7.0.0 kibana          :7.0.0 安装 1.新创建普通用户 elasticsearch不能用root账号 ...

  9. mongoDB的安全相关

    开启认证: 在配置文件里新增一行 auth = true   创建用户: 1.创建语法:createUser 2.{user:"<name>", pwd:"& ...

  10. 10.Java基础_IDEA的使用

    IDEA下项目结构: 项目->模块->包->java文件 流程图 1.创建一个空项目(JavaSE_Code) 选择Empty Project 输入项目名和路径 2.创建一个新模块 ...