CSS9:DynamicREM-AdaptivesolutionformobilesDynamicREM是针对手机的解决方案，如何适配所有手机，不是响应式解决方案，例如：淘宝。com是专用的PC终端。m.taobao.com是一个专用的移动终端。如果短时间用电脑访问网页，布局会很奇怪，就像用手机访问没有自适应网站的PC端一样。够了，因为我知道动态快速眼动！对于手机1.什么是REMem：一个m的宽度。如果面试官问，就是一个汉字的宽度。这个单位是相对于font-size的rem:rootem，根元素的font-size。即.rem的font-size是相对于html的font-size的。vh：视口高度，共100vhvw：视口宽度，共100cwMDN-length2。12像素规则网页chrome浏览器默认的font-size是16px。chrome浏览器默认设置可以显示的最小字体是12px，也就是说如果css样式小于12px，也会显示12px。这个需要手动设置。但是浏览器用户一般我不会设置这个。所以让字体不要小于12像素，否则chrome浏览器无法显示，firefox和safir浏览器没有这个限制。3.em和rem的区别对于汉字来说，宽高是一样的，所以font-sizeheight是1em的值（M字的宽高基本一样，width是人的宽度。所以叫em)区别：em:自己的font-size的值rem:根元素的font-size4.DynamicREM在做响应式设计之前需要四张设计图（没有图就不要做了，因为设计不是前端应该做的，没有完整定型的设计图之前不要写代码.):一个是窄屏，一个是宽屏，一个是ipad，一个是手机不同的屏幕看不同。反应灵敏。本博客不讨论响应式。它只看如何在手机上进行。4.1手机端问题：PC端只需要选择一种布局，然后Fixedwidth就可以了，但是手机端的手机太多了。有许多不同宽度的像素。没有办法让它响应。解决方案：使用百分比：例如，宽度5%、40%，使其始终自适应。整体缩放：制作一张图片，如果宽度不同，则整体放大。4.2手机上的百分比布局，固定宽度布局缺点百分比布局缺点：宽度容易确定，因为可以和父容器比较，相对于父容器。但是高度很难确定，比如高度写成20%，我还没写呢，想做一个宽高1:2的div，但是做不到，有很强的不确定性。无法将高度与宽度相匹配。如果要写下面的设计，假设固定宽度为320px，固定宽高后的问题：即如果手机的宽度发生变化，将无法适应屏幕变化。如果居中，则边会变大。固定宽度只能让其他宽度的手机看到320px的宽度。想一想想要的效果是所有的元素都应该按比例放大。单位要相对于宽度，这样设计稿可以很好的还原px、em、vw，但是vw的兼容性太差，所以退而求其次的方案是4.3。最终的解决方案依赖于rem的font-size，用js让的font-size依赖于pagewidth，那么rem就间接依赖于页面的pagewidth，所以引入REM方案，加上
标签中的以下代码，使1rem等于页面宽度
DynamicREM使用上面的代码可以让长度单位相对于页面宽度定义，以适应任何手机不同的屏幕尺寸。无论屏幕宽度如何变化，布局始终完美适配屏幕。4.4优化后的rem小于1，pageWidth/100不方便写，所以支付分为100rem，刚才的0.4rem可以写成40rem。这就像大众汽车一样使用。但是有一个问题，谷歌浏览器的字体设置不能小于12px，所以除以100后，html标签-size的字体变成了12px。解决方法：可以缩小10倍，10rem是页面的总宽度，rem与其他长度单位混用。对于border这样的小单位，让它固定，不需要缩放，因为1px缩放，border也显示1px。如果5px缩放，2.5px不显示，value显示2px，px不会变成小数。font-size不需要缩放，设置手机所有屏幕的font-size一样大，和显示不会影响外观5.使用sass自动将设计稿的px转换为rempx需要计算，如果设计师给的设计稿只有640px宽度的设计稿，就很麻烦，有是一个div，里面是256px×128px，那么宽度的rem是256/64010rem，高度的rem是128/64010rem，全部替换成rem后，所有的移动页面都可以自动缩放。这样的缺点是显而易见的，你要自己计算rem的值吗？有什么办法可以把px转rem，交给程序来做吗？是的，萨斯。一定要逼自己用命令行，逼自己学英文，逼自己看文档。只有做到这三点，你才能成为前端水平20%的程序员。现在很多前端工具都没有窗口界面。我已经安装了linu虚拟机，只需要一个命令就可以安装软件和其他工具包，非常方便。5.1安装和使用sass使用npm安装（linux环境）由于国内网络环境特殊，不能直接安装，所以需要先设置国内镜像，设置淘宝源npmconfigsetregistryhttps://registry.npm.taobao.org/touch~/.bashrc设置后还是没用，因为node-sass会在亚马逊上下载一个资源，所以需要设置一下，淘宝下载资源，不要出国下载echo'exportSASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"'>>~/.bashrcsource~/.bashrc全局安装npmi-gnode-sass如果你用windows肯定会报报错，不知道为什么，建议从现在开始，编程使用linux或者mac，安装工具就是命令行。如果实在放不下windows，就在windows上装个虚拟机，深入安装linux、deepin或者ubantu都可以。安装好后做个例子：mkdir~/Desktop/scss-democd~/Desktop/scss-demomkdirscsscsstouchscss/style.scssstartscss/style.scss在scss文件夹下创建style.scss接下来：node-sass-wrscss-ocss使用上面的命令来监听scss文件夹。开始实验：此时编辑scss文件会自动得到css文件。例如，写html{color:red;p{颜色：蓝色；}}很有型。因此，在scss文件中添加：@functionpx($px){@return$px/$designWidth*10+rem;}$designWidth:640;//640是设计稿的宽度，需要按照设计稿的宽度填写。设计师设计稿的宽度需要统一。child{width:px(320);高度：px(160)；保证金：px(40)px(40)；边框：1px纯红色；向左飘浮;font-size:1.2em;}对应的，css会自动将px改为em（宽度为640px时）.child{width:5rem;高度：2.5rem；保证金：0.625rem0.625rem；边框：1px纯红色；向左飘浮;字体大小：1.2em；这样就不需要手动转换rem的值了。
