移动页面100%自适应,媒体查询 - REM单位字体设置

/* 媒体查询 - 字体设置 */
/* 平滑过渡 */
html{ -webkit-transition: font-size .2s ease-out; transition: font-size .2s ease-out; }
/* 设计稿宽度=640时, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此类推 */
@media screen and (max-width: 1280px) {
	html{ font-size: 200px; }
}
@media screen and (max-width: 1200px) {
	html{ font-size: 187.5px; }
}
@media screen and (max-width: 1120px) {
	html{ font-size: 175px; }
}
@media screen and (max-width: 1080px) {
	html{ font-size: 168.75px; }
}
@media screen and (max-width: 960px) {
	html{ font-size: 150px; }
}
@media screen and (max-width: 880px) {
	html{ font-size: 137.5px; }
}
@media screen and (max-width: 840px) {
	html{ font-size: 131.25px; }
}
@media screen and (max-width: 800px) {
	html{ font-size: 125px; }
}
@media screen and (max-width: 720px) {
	html{ font-size: 112.5px; }
}
@media screen and (max-width: 640px) {
	html{ font-size: 100px; }
}
@media screen and (max-width: 600px) {
	html{ font-size: 93.75px; }
}
@media screen and (max-width: 560px) {
	html{ font-size: 87.5px; }
}
@media screen and (max-width: 480px) {
	html{ font-size: 75px; }
}
@media screen and (max-width: 400px) {
	html{ font-size: 62.5px; -webkit-transition: none; }
}
@media screen and (max-width: 360px) {
	html{ font-size: 56.25px; }
}
@media screen and (max-width: 320px) {
	html{ font-size: 50px; }
}
时间: 2024-10-29 19:06:07

移动页面100%自适应,媒体查询 - REM单位字体设置的相关文章

媒体查询 + rem用法

计算方法 计算rem方法: 结合媒体查询 -> 随着设备的改变 更改html font-size的值. ? 媒体查询确定范围?? ? 移动端设计图 : 640px 750px 1080px; dpr 2 2 3 范围 320px 375px @media screen and (max-width:320px){ html{ font-size:12px; } } @media screen and (min-width:321px) and (max-width:375px){ html{ f

一种简单的 rem 单位基准设置

1rem 换算成的像素值等于 html 元素的 font-size 值 如果 设置 html 的 font-size 为 100px, 那么设计稿的 像素转换成 rem 只需要除以 100 即可. function setRem(designWidth, maxWidth) { var htmlElm = document.documentElement; var pageWidth = htmlElm.getBoundingClientRect().width; pageWidth = Mat

rem 适配布局 + LESS + 媒体查询

1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制 比如:根元素(html )设置的 font-size=12px:非根元素设置 width:2rem:则换成px 表示 24px(12px*2rem) 2. 媒体查询(@media) @media 可以针对不同的屏幕尺寸设置不同的样

Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询

实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面rem = 页面元素值(设计稿) / (屏幕的宽度/划分的份数) (屏幕的宽度/划分的份数) = html大小 这个算法你也不需要太纠结,按照这个来就是 最后终结一下: 首先我们选一套标准尺寸 750为准 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到

0080 媒体查询media、引入资源

什么是媒体查询 媒体查询(Media Query)是CSS3新语法. 使用 @media查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机.Android手机,平板等设备都用得到多媒体查询 媒体查询语法规范 用 @media开头,注意@符号 mediatype : 媒体类型 关键字: and .not.only media feature : 媒体特性必须有小

媒体查询-全面学习

以前总是心里想,媒体查询很简单,几个查询然后给个单独的样式就ok了,但当实际解决其问题来的时候,似乎下手有点艰难,所以今天特地来全面学习了解并记录下. 首先,css2的媒体查询与css3有区别的,我这里表述似乎有问题,css2应该叫媒介查询,什么是媒介查询,比如: 1 <link rel="stylesheet"<span style="color: #ff0000;"> media="screen"</span>

01.媒体查询

rem单位 rem(root em) 是一个相对单位,类似于em ,em是父元素字体大小. 不同的rem 的基准是相对于html元素的字体大小 比如,根元素(html)设置font-size=12px;非根元素设置width:2rem,则换成px表示就是24px; 优点:通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 媒体查询 Media Query,是CSS3新语法 1.用@media开头 注意@符号 @media 2.mediatype 媒体类型 //不同终端设备划分成不同

0082 rem适配方案:less+rem+媒体查询、flexible.js+rem

1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备. 2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比缩放的适配. 技术方案: 1.less+rem+媒体查询 2.flexible.js+rem 总结: 两种方案现在都存在,方案2 更简单,现阶段无需了解里面的js代码. rem实际开发适配方案1 ①假设设计稿是750px ②假设我们把整个屏幕划分为15等份(划分标准

关于使用rem单位,calc()进行自适应布局

关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在进行自适应布局的过程当中则会有些力不从心,大部分的解决方案是使用%为单位配合@media媒介查询来进行自适应布局.不过还有另外一个css3新添加的单位也同样可以拿来进行自适应布局,在我看来这种方法也更加方便直观. em和rem 首先先介绍一下em,这个单位是根据其父元素的字体大小来进行计算的,即1e