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. 黄聪：不使用 webpack，vuejs 异步加载模板

    webpack 打包不会玩,整了这么个小玩具 一段 vue 绑定代码,关键点在 gmallComponent 1.异步加载外部 vue 文件(非 .vue) 2.按一定规则拆分 template.sc ...

  2. 黄聪：微信小程序 服务器 TLS1.0 1TLS.2 配置详细教学！

    下载IISCrypto.exe 点击best 工具自动推荐选中 也可以定义勾选 选择配置完成 然后点击”apply“ 软件弹窗提醒你 手动重启服务器!!!重启服务器 搞定! 最后 https://ww ...

  3. DbgUiConnectToDbg(ntdll.dll)函数逆向

    暂时未解决问题: 1.  [fs+0F24h]中存储着什么东西. 答案:其存放着被调试程序的DbgObject句柄._NtCreateDebugObject(ntoskrnl.exe)函数逆向分析 该 ...

  4. oracle学习笔记（十二） 查询练习（二） 高级查询

    高级查询练习 /*--------------------------------------------- 分组查询 -------------------------------------*/ ...

  5. PHP+Swoole 作为网络通信框架

    PHP的异步.并行.高性能网络通信引擎,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,异步Redis,数据库连接池,AsyncTask,消息队列, ...

  6. PHP通过session判断防止表单重复提交实例

    PHP通过session判断防止表单重复提交实例,当用户提交表单后,为防止重复操作,通过session来判断是否为初次提交,否则让他返回到之前表单页面. 当前表单页面is_submit设为0 SESS ...

  7. Linux常用命令（2）

    3.帮助命令 A,帮助命令:man    B,其他帮助命令 3.1,格式:man [命令名] 查看命令拥有哪个级别的帮助:                                       ...

  8. JavaScript操作数据库JS操作Access数据库

    avaScript操作数据库JS操作Access数据库,跟其他语言操作差不多,总结了一下习惯代码,仅供参考学习.现在在F盘有文件abc.mdf,表名为Student,一共2个字段,Id数字类型主键,s ...

  9. uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果

    介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...

  10. QNetworkRequest加Authorization头，适应Rest风格的API

    Rest是无状态的.Rest的请求之间不应该有依赖,在调用一个请求前,不需要一定要去提前调用另外一个请求.Rest里面不应该有 session,特别是Rest请求不应该保存信息在sesssion里,以 ...