rem

本章主要分为以下几个部分 正确理解响应式设计 响应式设计的步骤 响应式设计需要注意的问题 响应式网页布局实现原理第一：正确理解响应式布局 什么是响应式布局？ 　　响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落里的某个地方就好比父元素，由于父元素空间的改变，我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。 　　 换句话说，根据屏幕分辨率不同，做出相同视觉效果。 响应式设计的步骤 　　1.编写非响应式代码 　　2.加工成响应式代码 　　3.响应式细节处理 　　4.完成响应式开发 1.布局及设置meta标签 　　当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局，页面固定宽度大小，我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询（Media Query)和响应式代码。这种操作更容易实现响应式特性。 　　当你完成当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。这将设置屏幕按1

一、首先介绍一下px px就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现 px是相对于显示器分辨而言的 如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户用ctrl滚页面的时侯(说白了就是ctrl+,ctrl-)，你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px.... 二、接下来介绍一下em 如果你从上到下阅读批文，你应该已经知道了em出现的原因，下面说说em的特性，简单的讲px是绝对单位，1px就是1px，2px就是2px，以此类推，而em是相对单位，em是相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px,也就是1em默认等于16px,如果你想给某个文字设定为14px，就这样写font-size:0.875em;样式表都用em来写的话，就可以解决ctrl+,ctrl-时造成的页面错乱问题。 这时侯有人就会抱怨了，数学是体育老师教育的，除以16我怎么可能算明白，那好办，你可以在根节点上重定义基准号html{font-size:62.5%},此时页面基准字号就是16px*62.5% = 10px,那么此时1em=10px,那么些时14px = 1.4em依此类推 但是,问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，举例如下: html { font

1、先观察关系的转换（ http://pxtoem.com/） em优缺点 1. em的值并不是固定的； 2. em会继承父级元素的字体大小。 所以我们在写CSS的时候， 需要注意两点： 1. body选择器中声明Font-size=62.5%； 2. 将你的原来的px数值除以10，然后换上em作为单位； 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。 rem特点 rem是 CSS3 新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是 一个例子： p { font - size :

这里我们介绍两个脚本utlpwdmg.sql与undopwd.sql，这两个脚本是Oracle数据库软件提供的正式脚本，第一个脚本用于指定Oracle默认 的profile并提供了一个密码的验证函数，提供部分对新密码的验证；第二个脚本是将之前的改变做回原来状态。 我这里是11g数据库中的脚本，其提供的控制如下： 密码长度不低于8位 密码不能跟用户名一致 密码不能跟用户名反过来的字符一致 密码不能跟服务器名一致 包含了一些数据字典的验证，不能与其一致，比如（oracle123，database1等） 密码不能跟oracle(1..100)一致 密码至少包含一个数字与字母 密码跟旧密码至少三个以上字符不同 密码使用周期 密码过期时间 .. 第一个脚本提供了两个函数用于密码验证，一个是11g的，另一个是之前老版本的（当然我们可以自己写验证函数） 函数如下： Rem Rem $Header: rdbms/admin/utlpwdmg.sql /st_rdbms_11.2.0/1 2013/01/31 01:34:11 skayoor Exp $ Rem Rem utlpwdmg.sql Rem Rem Copyright (c) 2006, 2013, Oracle and/or its affiliates. Rem All rights reserved. Rem Rem NAME

/* px 转化换 rem ，转化是 10 。 比如： 你的设计图为750，那么就 750 / 75 = 10 rem。 设计图中你量尺寸都要除 75 就是 rem值。再比如量的设计图按钮宽度 66px，那么计算：66 / 75 = 0.88rem 比如2： 设计图为900，那么 900 / 90 = 10rem; 设计图中所有量的尺寸都得除 90 就等于 rem的之。 以此类推 */ ;(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem =

一、静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： 　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。 　 在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？) 　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem） 　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见content"width=640,user

问题描述：pc端屏幕适配问题一直是个难点，选择用rem+媒体查询的方式。但是遇到了问题： 1、给了font-size: 62.5%;结果发现1rem=12px, 2、考虑可能是因为谷歌浏览器支持的最小字号是12px导致的，去谷歌的高级设置中把最小字号改成了8，结果发现还是不行。 3、直接把font-size: 62.5%改成了font-size: 625%，也就是1rem=100px,发现这样是可以的。 4、再结合媒体查询实现了屏幕的适配问题 来源： https://my.oschina.net/u/4138368/blog/3131569

1、移动端的字体 最开始的的方案是： body { font-family: 'Helvetica Neue', Helvetica, 'microsoft yahei', sans-serif; } 升级后的方案： body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif; } 以前iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi， iOS 9+ 就开始支持 -apple-system 参数了， Chrome 使用 BlinkMacSystemFont ，兼容 iOS/MacOS。 现在很多设计师的字体都是PingFang，所以这里做了一个兼容。 顺便用"Microsoft Yahei"兼容了一下Window系统。 原生 Android 下中文字体与英文字体都选择默认的无衬线字体。 但是因为安卓系统可以去改系统的默认字体，而且每一个手机厂家也会内置字体，所以直接让他去选择默认的吧。不用单独去折腾安卓的字体了。 2、移动端的适配 移动端的适配方案各个厂商都一套方案，但是现在主流的方案是阿里的flexible，具体可以去看下这篇文章：

css3 rem手机自适应框架 rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便 <pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width:10rem; height:10.2rem; background: #000;"></div> <div style="width:10.6rem; height:10.3rem; background: #F00;"></div> </body> <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { /* var clientWidth = docEl.clientWidth;*/ var clientWidth = parseInt($('body').width()); if (!clientWidth)

目录 移动端的适配方案 百分比适配 viewport缩放适配 DPR缩放适配 rem适配 hotcss适配(使用dpr+rem,简单好用) vw/vh适配(为适配而生，最优方案) 移动端的适配方案 不同的尺寸的手机设备上，页面相对合理的展示（自适应）或者保持统一效果的等比缩放 百分比适配 根据父级计算百分比，需要配合其他布局使用 <div class="container"> <div></div> <div></div> <div></div> <div></div> </div> html,body{ width:100%; .container{ width:100%; div{ float:left; width:25%; } } } viewport缩放适配 把所有机型的css像素设置成一致的,需要动态设置 缩放比公式: 缩放比 = css像素/375 <script> (function(){ //获取CSS像素,需要确保缩放为1(minimum-scale=1,maximum-scale=1) let pageWidth = document.documentElement.clientWidth; let pageWidth = window.innerWidth; let pageWidth = window.screen.width; //求缩放比 var