rem适配的两种方式(css媒体查询和js控制)
来源:互联网 发布:慈溪人民医院挂号软件 编辑:程序博客网 时间:2024/06/05 19:30
css媒体查询:(根字体大小100px,如果10px大小,写成0.1rem)
html {
font-size : 100px;
}
@media only screen and (min-width: 320px) and (max-width: 479px){
html {
font-size: 42.67px !important;
}
}
@media only screen and (min-width: 480px) and (max-width: 639px){
html {
font-size: 64px !important;
}
}
@media only screen and (min-width: 640px) and (max-width: 749px){
html {
font-size: 85.34px !important;
}
}
@media only screen and (min-width: 750px) and (max-width: 959px){
html {
font-size: 100px !important;
}
}
@media only screen and (min-width: 960px) and (max-width: 1241px){
html {
font-size: 128px !important;
}
}
@media only screen and (min-width: 1242px){
html {
font-size: 165.6px !important;
}
}
js控制(zepto / jQuery)(根字体大小100px,如果10px大小,写成0.1rem)
function setFont() {
let window_width = window.innerWidth;
let font_size = parseFloat(window_width / 3.75);
$(‘html’).css(‘font-size’, font_size);
}
$(window).on(‘resize’, function () {
setFont();
});
- rem适配的两种方式(css媒体查询和js控制)
- 响应式布局 css3 media 媒体查询 和js+rem
- 下拉菜单的两种实现方式:CSS和JS
- css的媒体查询
- 逐帧动画 两种实现方式 css和js
- CSS基础教程 -- 媒体查询屏幕适配
- CSS基础教程 -- 媒体查询屏幕适配
- 原生js更改css样式的两种方式
- 屏幕适配之c3媒体查询代码块(20/1为1rem)
- js的两种查询方式 LHS and RHS
- Intent选择系统资源(图片,媒体等)的两种方式
- css @media rem+百分比布局 响应式布局之媒体查询
- css媒体查询iphone4和iphone5
- 媒体查询--PX,EM or REM?
- JS事件和CSS媒体查询对同一元素操作样式发生冲突解决方案
- css媒体查询 @media适配不同大小窗口
- html中style的两种方式和js的两种方式
- CSS引用鲜为人知的媒体查询
- android 通过wifi adb连接调试
- netlink详解--以本人项目为实例
- java变量,初始化快,构造函数的执行顺序
- yii2 adminlte 用composer安装时遇到的问题
- caffe 使用cudnn 加速报错
- rem适配的两种方式(css媒体查询和js控制)
- 23. Merge k Sorted Lists
- logstash(V1.2+) 01_入门及架构
- Redux高级进阶
- 新建Maven项目下面没有src/main/java这个包
- GuavaCache简介(一)
- linux下挂在本地yum云
- 【第七周】项目6-停车场模拟
- Mac下AndroidStudio中手动配置Gradle