Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="app">
  <div class="app__icon">
    <img class="app__icon__img" src="http://www.meow.re/demo/screen-adaptation-in-mobileweb/icon.png">
  </div>
  
	  <div class="app__text">
    		<h2 class="app__text__title">忍者必须死Ⅱ</h2>
		    <p class="app__text__summary">史上最萌的手游,安装量过10万。</p>
	  </div>
  
	  <a class="app__button" href="#">下载</a>
	  <i class="app__label"></i>
</div>
              
            
!

CSS

              
                $ppr: 640px/16/1rem; // pixel per rem

* {
  box-sizing: border-box;
  margin: 0;
  -webkit-text-size-adjust: none;
}

html {
  font-size: $ppr*1rem;
  background-color: #f7f7f7;
}

body {
  width: 640px/$ppr;
  margin: 0 auto;
  line-height: 1.4;
  background-color: #fff;
}

.app {
  position: relative;
  display: -webkit-flex;
  align-items: center;
  padding: 26px/$ppr 20px/$ppr;
  border-bottom: 1px solid #cfcfcf;
  &__icon {
    width: 94px/$ppr;
    height: 94px/$ppr;
    border-radius: 16px/$ppr;
    overflow: hidden;
    &__img {
      display: block;
      width: 100%;
    }
  }
  &__text {
    margin-left: 18px/$ppr;
    margin-right: auto;
    &__title {
      font-size: 35px/$ppr;
      color: #181818;
    }
    &__summary {
      font-size: 24px/$ppr;
      color: #828282;
    }
  }
  &__button {
    display: block;
    padding: 8px/$ppr 26px/$ppr;
    font-size: 26px/$ppr;
    text-align: center;
    color: #fff;
    background-color: #3cba1a;
    border-radius: 8px/$ppr;
    text-decoration: none;
  }
  &__label {
    position: absolute;
    left: 0;
    top: 0;
    width: 88px/$ppr;
    height: 64px/$ppr;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABACAMAAACpzkDwAAAAY1BMVEX////kNyDkNyDkNyDkNyDkNyDkNyDkNyDkNyDkNyD99vXkNyDkNyDkNyDkNyD1xcHkNyD////99vX76+r64d/41tT2y8j0wLzztK/xqKLvm5TtjYXrf3bqcGToX1HmTTzkNyDPEQg9AAAAEXRSTlMAESIzRFVmd4iZqqq7zN3u7uYy9NoAAAHASURBVHja1dXbkoIwEATQJtyXyxJFIKiE///KJSJCVhQ3ZB62H7Sssk6Nk8agt54ijXwG2EXzJHAxxuKkScAwx5KaRS702FBTbdQnuKtrI9V3sJbFV0rezR9aIWouNzcQrKs6fOHi9i74FPG+AiHD60zmnBFuhHjPJh7eZhVuN6sVMeATuO+bRr3Ksu234TzAdh4wV5048WYTznzgD3BfV93gnvsNOPWAz+FusWJev4GzT9kX8COdKav1uL1P+gLOfWAv3KofoT/gRejAABZPPf4FJwzYDTeqGxpc+IAZrK2i5hcdjh0Yw7IUChbV9C83w7kHmMOC3+BmePIkP/QLOHGwA+74cVxFxdszr2bYZLtLuFJrVbA8XU+3VY9wxrAPburH4V34QU5wDOyE720YYHkc740BNl/DEj6oCl/VKR7lCH+7sAGX0xVXXe/H+QUr8NOV5oAEjgESOAINHIIGDkAD25h3DbbjguLcVuEYNHACGjhzaOCcgQQuXNDAAWjgGDSwxYPTYRc0cAgaOAURzIhg24uY4BxEsEcEx6CBC4cIjkADkwwMkqqNMM3AoBoYVAODphIKZkRwSuTCxz/LDzuIyYMbR8EsAAAAAElFTkSuQmCC') no-repeat;
    background-size: contain;
  }
}
              
            
!

JS

              
                /**
 * MobileWeb 通用功能助手,包含常用的 UA 判断、页面适配、search 参数转 键值对。
 * 该 JS 应在 head 中尽可能早的引入,减少重绘。
 *
 * fixScreen 方法根据两种情况适配,该方法自动执行。
 *      1. 定宽: 对应 meta 标签写法 -- <meta name="viewport" content="target-densitydpi=device-dpi,width=750">
 *          该方法会提取 width 值,主动添加 scale 相关属性值。
 *          注意: 如果 meta 标签中指定了 initial-scale, 该方法将不做处理(即不执行)。
 *      2. REM: 不用写 meta 标签,该方法根据 dpr 自动生成,并在 html 标签中加上 data-dpr 和 font-size 两个属性值。
 *          该方法约束:IOS 系统最大 dpr = 3,其它系统 dpr = 1,页面每 dpr 最大宽度(即页面宽度/dpr) = 750,REM 换算比值为 16。
 *          对应 css 开发,任何弹性尺寸均使用 rem 单位,rem 默认宽度为 视觉稿宽度 / 16;
 *              scss 中 $ppr(pixel per rem) 变量写法 -- $ppr: 750px/16/1rem;
 *                      元素尺寸写法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。

 */
window.mobileUtil = (function(win, doc) {
	var UA = navigator.userAgent,
		isAndroid = /android|adr/gi.test(UA),
		isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
		isMobile = isAndroid || isIos;  // 粗略的判断

	return {
		isAndroid: isAndroid,
		isIos: isIos,
		isMobile: isMobile,

        isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
		isWeixin: /MicroMessenger/gi.test(UA),
		isQQ: /QQ\/\d/gi.test(UA),
		isYixin: /YiXin/gi.test(UA),
		isWeibo: /Weibo/gi.test(UA),
		isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),

		tapEvent: isMobile ? 'tap' : 'click',

		/**
		 * 缩放页面
		 */
		fixScreen: function() {
      var metaEl = doc.querySelector('meta[name="viewport"]'),
          metaCtt = metaEl ? metaEl.content : '',
          matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
          matchWidth = metaCtt.match(/width=([^,\s]+)/);

      if ( !metaEl ) { // REM
        var docEl = doc.documentElement,
            maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度
            dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
            scale = 1 / dpr,
            tid;

        docEl.removeAttribute('data-mw');
        docEl.dataset.dpr = dpr;
        metaEl = doc.createElement('meta');
        metaEl.name = 'viewport';
        metaEl.content = fillScale(scale);
        docEl.firstElementChild.appendChild(metaEl);

        var refreshRem = function() {
          var width = docEl.getBoundingClientRect().width;
          if (width / dpr > maxwidth) {
            width = maxwidth * dpr;
          }
          var rem = width / 16;
          docEl.style.fontSize = rem + 'px';
        };

        win.addEventListener('resize', function() {
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener('pageshow', function(e) {
          if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
          }
        }, false);

        refreshRem();
      } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
        var	width = parseInt(matchWidth[1]),
            iw = win.innerWidth || width,
            ow = win.outerWidth || iw,
            sw = win.screen.width || iw,
            saw = win.screen.availWidth || iw,
            ih = win.innerHeight || width,
            oh = win.outerHeight || ih,
            ish = win.screen.height || ih,
            sah = win.screen.availHeight || ih,
            w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
            scale = w / width;

        if ( scale < 1 ) {
          metaEl.content = metaCtt + ',' + fillScale(scale);
        }
      }

      function fillScale(scale) {
        return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale;
      }
		},

		/**
		 * 转href参数成键值对
		 * @param href {string} 指定的href,默认为当前页href
		 * @returns {object} 键值对
		 */
		getSearch: function(href) {
			href = href || win.location.search;
			var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
			href && href.replace(reg,function( $0, $1, $2, $3 ){
				data[ $1 ] = $3;
			});
			return data;
		}
	};
})(window, document);

// 默认直接适配页面
mobileUtil.fixScreen();
              
            
!
999px

Console