关于移动端css用rem单位的情况
来源:互联网 发布:手机淘宝开店怎么注册 编辑:程序博客网 时间:2024/05/20 03:08
写移动端的页面有一些了
试用过的方法大概总结一下:
1、字号单位px,宽度写百分数,高度写定值px
2、在css中用@media写媒体查询,以iphone6 为分界,字号单位用rem,宽度写百分数,高度尽量用padding,不要给定值(防止用户在浏览器中自动调节字号大小,使页面错乱)
3、就是本文想说的重点方法,用js算一下基本字号的大小,字号,宽度和高度,所有单位都用rem换算。(假如,你想做一个以下的类似这样的手机活动页,花圈部位为可替换)
写法(如果设计图是640尺寸的,当js中设置除以6.4,那css中,如果字号在设计图中是24px,那么css就写成0.24rem除以100就ok了,如果宽度是100px;那就写width:1rem;):
<script>
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 6.4+ 'px';
</script>
如果不想让图片随屏幕大小无线放大,还可以给一个限制如下
<script>
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 340){
deviceWidth = 340;
} else if(deviceWidth < 320){
deviceWidth = 320;
}
document.documentElement.style.fontSize = deviceWidth / 6.4+ 'px';
</script>
试用过的方法大概总结一下:
1、字号单位px,宽度写百分数,高度写定值px
2、在css中用@media写媒体查询,以iphone6 为分界,字号单位用rem,宽度写百分数,高度尽量用padding,不要给定值(防止用户在浏览器中自动调节字号大小,使页面错乱)
3、就是本文想说的重点方法,用js算一下基本字号的大小,字号,宽度和高度,所有单位都用rem换算。(假如,你想做一个以下的类似这样的手机活动页,花圈部位为可替换)
写法(如果设计图是640尺寸的,当js中设置除以6.4,那css中,如果字号在设计图中是24px,那么css就写成0.24rem除以100就ok了,如果宽度是100px;那就写width:1rem;):
<script>
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 6.4+ 'px';
</script>
如果不想让图片随屏幕大小无线放大,还可以给一个限制如下
<script>
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 340){
deviceWidth = 340;
} else if(deviceWidth < 320){
deviceWidth = 320;
}
document.documentElement.style.fontSize = deviceWidth / 6.4+ 'px';
</script>
0 0
- 关于移动端css用rem单位的情况
- 移动端的rem单位
- 移动端 单位 rem
- 移动端rem单位
- 移动端rem单位自适应的用法
- 移动端字体大小单位rem
- CSS移动端的单位
- 移动端开发(二):rem单位的计算问题
- 移动端布局单位选择之rem
- 移动端页面字体单位rem
- 关于em && rem单位
- 关于css的单位
- 移动端开发rem单位的格式化js文件flexible.js
- 移动端布局字体单位的选择之px、rem和em揭秘
- 移动端用rem的实现
- 以rem为单位移动端页面开发
- 移动端初设置(使用rem作为单位)
- css中单位px、pt、em和rem的区别
- hibernate入门
- ZOJ More Divisors 2562 (反素数)
- Notepad++ 快捷键 大全
- scons 编译
- 机器学习常用数学公式
- 关于移动端css用rem单位的情况
- hdoj StrangeStandard 4133 (反素数)
- 点滴 PUSH-PULL AND OPEN DRAIN+PULL-UP/DOWN
- 微信sharesdk
- 南大软院大神养成计划第十八天
- Computer English
- 打架
- leetcode Super Ugly Number
- Codeforces 601A The Two Routes【最短路】