标签：媒体 media 布局 width html rem 屏幕

移动web开发之rem布局

rem 单位 

rem (root em) 是一个相对单位,类似于em, em 是父元素字体大小

不同的是rem的基准是相对于html元素的字体大小

rem使用:

比如,根元素(html)设置font-sizi=12px ,非根元素设置width:2rem,则换成px表示就是24px.

/* 根html 为 12px */

html {
　　font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
　　font-size: 2rem;
}

rem的优势: 父元素文字大小可能不一致,但是整个页面只有一个html,可以很好来控制整个页面的元素大小

 

媒体查询  

什么是是媒体查询:

1.使用@media查询.可以针对不同的媒体类型定义不同的样式

2.@media可以针对不同的屏幕尺寸设置不同的样式

3.当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新熏染页面

4.目前针对很多屏苹果手机,Android手机,平板等设备都用得到媒体查询

 

语法规范:

@media mediatype and|not|only (media feature) {
　　CSS-Code;
}

注意: 

1.用@media开头,注意用@符号

2.mediatype 媒体类型

3.关键字 and  not  only 

4.media feature 媒体特性必需有小括号包含

 

关键字详细说明:

1. mediatype 媒体类型 

将不同的终端设备划分成不同的类型,称为媒体类型(理解为设备类型.非屏幕,屏幕)

值 　　　　　　解释说明

all　　　　用于所有设备

print　　    用于打印机和打印预览

scree　　  用于电脑屏幕,平板电脑,智能手机等

 

2.关键字 

关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件

and :  可以将多个媒体特性链接到一起,相当于"且"的意思

not : 排除某个媒体类型,相当于"非"的意思,可以省略

only: 指定某个特定的媒体类型,可以省略

 

3.媒体特性

注意:要加小括号 

值　　　　　　解释说明

width　　　　定义输出设备中页面可见区域的宽度

min-width　　定义输出设备中页面最小可见区域  (达到最小值才会有样式)

最小屏幕宽度

(当屏幕大于多少时用  min-width)

max-width　   定义输出设备中页面最大可见区域宽度 (超过最大值样式无效)

最大屏幕宽度

(小于等于)

(当屏幕小于多少时用 max-width)

 

总结: 

1.为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写

但是我们最喜欢的还是从小到大来写,这样代码更简洁 

2.rem+媒体查询,实线屏幕大小改变,界面元素跟着一起改变的原理.

实现顺序:

1.媒体查询作用,根据屏幕尺寸的范围,来切换html的font-sizi(界面元素的参照物跟着屏幕改变)

2.界面元素的大小都以rem为单位(rem代表参照物html的font-sizi)

 

less基础 

 

标签：媒体,media,布局,width,html,rem,屏幕
来源： https://www.cnblogs.com/chennr/p/14706154.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。