font-size

移动端页面布局 1、弹性布局（100%布局，流式布局）——拉勾网、天猫首页 好处：充分发挥大手机的优势——显示内容越多 缺点：屏幕过大，间距过大，比例失调。 特点： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变； 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边。 2、等比缩放布局（rem布局）——网易、淘宝首页 视口(viewport)设置： 在html上根据不同分辨率设置不同font-size，通过js计算出来 什么是DPR 设备的物理像素和逻辑像素（真实像素/css像素）的对应关系，即物理像素（设备像素）/逻辑像素，默认缩放为100%的情况下，设备像素和CSS像素的比值。例如iphone6，屏幕逻辑像素为375PX，而购买时所知的750PX，这就是屏幕的物理像素。 其实每个手机的DPR不全都是一样的，例如我们的iphone6它的DPR是2，但是iphon6Plus它的DPR却是3，在早先的移动设备中呢，是没有DPR这个概念的，随着我们技术的发展，移动设备的屏幕像素密度越来越高，苹果公司从iphone4开始推出了视网膜屏幕，之所以叫视网膜屏幕，是因为屏幕的PPI，也就是屏幕像素密度太高了，人的视网膜无法分辨出屏幕上的像素点。 iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍

针对近日华为，小米的部分机型，在升级系统或升级微信之后，微信内置浏览器产生的rem不能正确填充满的问题，有如下解决方案 目前来看，产生这个情况的原因是因为给html附font-size时，附上的font-size和实际上html的font-size 大小并不一致 如图： 在问题机型上展示的三个值 分别为 1.机型最终附给html的font-size大小 2.我想赋给html的font-size大小 3.二者的倍数 尝试找了多个问题机型，最终的比例都是1.25左右（1.24999），所以解决方案如下 //针对机型适配的代码就不贴了 网上随手一搜一堆 这里就针对特殊机型的处理展示一下 var docEl = doc.documentElement, setFontSize = function () { var clientWidth = document.documentElement.clientWidth, timer; if (!clientWidth) return ; 　　　　　　 //原本对于html的字号设置 我这里用的是750的标准 ，640的也是同理 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px' ; 　　　　　　 if (window.getComputedStyle(document

针对近日华为，小米的部分机型，在升级系统或升级微信之后，微信内置浏览器产生的rem不能正确填充满的问题，有如下解决方案 目前来看，产生这个情况的原因是因为给html附font-size时，附上的font-size和实际上html的font-size 大小并不一致 如图： 在问题机型上展示的三个值 分别为 1.机型最终附给html的font-size大小 2.我想赋给html的font-size大小 3.二者的倍数 尝试找了多个问题机型，最终的比例都是1.25左右（1.24999），所以解决方案如下 //针对机型适配的代码就不贴了 网上随手一搜一堆 这里就针对特殊机型的处理展示一下var docEl = doc.documentElement, setFontSize = function() { var clientWidth = document.documentElement.clientWidth, timer; if(!clientWidth) return;　　　　　　 //原本对于html的字号设置 我这里用的是750的标准 ，640的也是同理 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';　　　　　　 if(window.getComputedStyle(document

首先设置meta属性，如下代码： < meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" > 使用如下代码就能实现移动端的适配： html { font - size : - webkit - calc ( 13.33333333 vw ) ; font - size : calc ( 13.33333333 vw ) ; } 100vw相当于浏览器的window.innerWidth，是浏览器的内部宽度，注意， 滚动条宽度也计算在内 ！那么1vw就是表示1%的屏幕宽度。 其中的 13.33333333vw 是怎么来的呢？就是你的设计稿是750px，那么设计稿的1px就是0.133333333vw，那么100px就是13.33333333vw。也即是html的font-size设置为100px相当于1rem（设计稿为750px）。那么我们就可以很轻松的换算设计稿中的单位为rem了，比如一个元素宽度为150px，转换为rem就是1.5rem。其他尺寸设计稿的计算方式依次类推。 参考网易新闻移动端的写法： /** * view-port list: 320x480 320x568 320x570 360x592 360x598

从一个居中方案，来看CSS的布局。 一、水平居中 1.行内元素的水平居中 text-align:center; 2.块状元素的水平居中 设置宽度，margin:atuo; 子元素设置为inline-block，父元素增加text-align:center; 父元素设置display:flex;和justify-content:center; 绝对定位配合margin负值 二、垂直居中 　　1.display:inline-block;时，height和line-height设置为父元素高度 　　2.display:table-cell;和vertical-align:middle; 　　3.已知高度，绝对定位配合margin负值 　　4.未知高度，绝对定位配合CSS3的transform:translateY(50%) 　　5.父元素display:flex;和align-items:center; 　　6.父元素display:flex;然后子元素marigin:auto; 　 7.table元素中的td元素增加vertical-align:top;和text-align:center; 　　8.绝对定位，四个方向设置为0，配合margin:auto; 　　9.利用浮动，父元素浮动配合relative到中间，子元素利用relative进行偏移 　　10.利用font-size

壹 ❀ 引 早在大半年前，我在负责整理定义了前端组JavaScript开发规范与less、css样式开发规范。一直想将两个规范整理成文章，但在整理了JavaScript规范后，我花了较多的时间在学习JavaScript基础知识，所以对于样式规范一直处于放置状态。直到上周我收到了一条关于JavaScript规范的评论，提醒了我样式规范不能再拖了，那么在放假前花点时间整理一遍作为复习也算不错。 说在前面，本文虽然作为规范但对于less与css写法也给出了部分建议，所以在阅读本规范前建议读者先掌握less基本用法，而对于规范这里也只是给出建议，毕竟适合自己的才是最好的，本文开始。 贰 ❀ 命名规范 贰 ❀ 壹 class、id命名 JavaScript变量我们推荐使用小驼峰，但样式命名得做点改变，这里我们推荐使用 - 分隔符拼接。 /* good */ #foo-bar;.foo-bar /* bad */ #fooBar;.fooBar 贰 ❀ 贰 less变量命名 我们知道less提供了样式变量可供复用，对于多单词变量命名推荐采用 @ 开头并以 - 分隔符拼接的命名方式。 /* good */ @border-color:#fff; /* bad */ @borderColor: #fff; 贰 ❀ 叁 less函数命名 除了变量，less还提供了函数用于复用多属性class样式类

转自： http://www.cnblogs.com/consta... 前言 随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇文章分享了一些处理多屏幕自适应的经验，希望有益于各位。 特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 简单事情简单做-宽度自适应 所谓宽度自适应严格来说是一种pc端的自适应布局方式在移动端的延伸。在处理pc端的前端界面时候需要用到全屏布局时采用的就是此种布局方式。它的实现方式也比较简单，将外层容器元素按照百分比铺满的方式，里面的子元素固定或者左右浮动。 .div { width:100%; height:100px; } .child { float: left; } .child { float:right; } 由于父级元素采用百分比的布局方式

弹幕效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: "微软雅黑"; font-size: 62.5%; } .boxDom { width: 100%; height: 100%; position: relative; overflow: hidden; } .idDom { width: 100%; height: 50px; background: #666; position: fixed; bottom: 0px; } .content { display: inline-block; width: 430px; height: 40px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; } .title { display: inline; font-size: 4em; vertical-align: bottom; color: #fff; } .text

昨天发现了个好用的方法去设置手机端的rem单位，在这里记录下。 html{ 　　font-size:calc(100vw/7.5); } 这是按照750的设计稿（也就是iphone6的设计稿）。 100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于50px。 替换页面中的单位，把所有的px单位替换成rem，除以100，比如某字体大小在设计稿上是36px，就是0.36rem。 在iPhone6下，所有元素的尺寸还是和视觉稿的尺寸一样，而iphone5/iphone6plus中，因为设备的宽度变小/变大了，100vw/7.5得到的值，会相应的变小、变大，即rem的单位值会变，页面中所有的尺寸会等比例缩放。 so,这样就做到l了针对不同分辨率的设备保持视觉一致了。 but，vw单位，在低版本的设备可能不支持，那就需要用js来处理一下： document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px' ps：之所以让1rem等于50px，而不是1rem等于1px，是因为在chrome下针对中文的最小字体是12px。 下面介绍下css的各种单位： css单位 px ：绝对单位，页面按精确像素展示 em ：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算

最近看别人写代码，用到了height:100vh;当时感觉很有意思，以前没有见过vh这个单位，于是乎就到CSS3参考手册找答案了。。。自己顺便做了下总结： 1.vh vw:相对于视口的高度，宽度。视口被均分为100单位的vh,vw，神马意思呢？看个demo 1 <!DOCTYPE html> 2 <html lang="Zh-cn"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>css_vh_vw</title> 7 </head> 8 <style type="text/css"> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .a{ 14 height:10vh; 15 width: 10vw; 16 background-color: #3a9; 17 } 18 </style> 19 20 <body> 21 <div class="a"> 22 23 </div> 24 </body> 25 </html> View Code 效果图： 先说下我的浏览器窗口大概是1366*662，而代码里宽高分别是10vh 10vw;相当于把浏览器视口分成100份，取10vh 10vw,相当于取其中的10份，1366/100*10约等于136.59 662/100*10约等于66.19。 2.rem em