广东网站建设教程,精品课程网站源码,软件关键词排名,网页小游戏无需登录什么是rem#xff1f; rem是相对于根元素html字体大小来计算的#xff0c;即( 1rem html字体大小 ) rem和em区别#xff1f; rem:#xff08;root em#xff0c;根em#xff09;根元素的fort-size的大小计算em#xff1a;相对长度单位#xff0c;相对于当前对象内文本… 什么是rem rem是相对于根元素html字体大小来计算的即( 1rem html字体大小 ) rem和em区别 rem:root em根em根元素的fort-size的大小计算em相对长度单位相对于当前对象内文本的字体尺寸如当前对行内文本的字体尺寸未被设置则相对于浏览器的默认字体尺寸。 em 的值并不是固定的 em的值会继承父级元素的字体大小。 rem手机端方案特点 所以手机端显示界面比例都一样只是大小不同1 remhtml fort-size viewport width在线转换工具: http://pxtoem.com/JS动态调整REM meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0,maximum-scale1.0, minimum-scale1.0scriptvar pageWidth window.innerWidthdocument.write(stylehtml{font-size:pageWidthpx;}/style)/script REM 可以与其他单位同时存在 font-size: 16px;border: 1px solid red;width: 0.5rem; 在 SCSS 里使用 PX2REM npm config set registry https://registry.npm.taobao.org/ touch ~/.bashrc echo export SASS_BINARY_SITEhttps://npm.taobao.org/mirrors/node-sass ~/.bashrc source ~/.bashrc npm i -g node-sass mkdir ~/Desktop/scss-demo cd ~/Desktop/scss-demo mkdir scss css touch scss/style.scss start scss/style.scss node-sass -wr scss -o css 编辑 scss 文件就会自动得到 css 文件 在 scss 文件里添加 function px( $px ){return $px/$designWidth*10 rem;
}$designWidth : 640; // 640 是设计稿的宽度你要根据设计稿的宽度填写。.child{width: px(320);height: px(160);margin: px(40) px(40);border: 1px solid red;float: left;font-size: 1.2em;
} 即可实现 px 自动变 rem 屏幕适配布局问题 响应式布局 流式布局媒体查询 用来解决不同宽度的布局问题父级宽度不够的时候子级节点会“挤下去”使用css3根据屏幕分辨率进行不同的样式应用优劣 这种布局通吃pc和移动端做到精细处两者的效果都很好缺点是媒体查询是有限的也就是可以枚举出来的对设计要求简单、清晰、复杂的设计稿会直接弄死前端同时需要多个设计稿css3低版本浏览器不支持伸缩布局 使用的是Flexbox 有兼容性问题整体思路考虑把一个元素变成一个伸缩容器 --伸缩容器中子元素的排列方式 --子元素所占空间 伸缩布局的属性 1 主轴方向 flex-direction:row /row-reverse右到左/column/column-reverse(下到上)2 伸缩项目在主轴的对齐方式 justify-contentflex-start /flex-end/center/space-between/space-around3 伸缩项目是否换行 flex-wrapnowrap/wrap4 换行后对齐方式 align-content:stretch:拉伸/flex-start...sapce-around5 不换行对齐方式 align-items 默认拉伸 值同上 伸缩项目的属性: 1 伸缩项目在伸缩容器中所占的空间 flex 值 数字 比例2 自己的对齐方式 align -selfstart /end/center3 排列顺序 order 数字 值越小越靠前 转载于:https://www.cnblogs.com/gitnull/p/9532112.html
