Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

响应式布局 媒体查询 #43

Closed
Wscats opened this issue Jul 14, 2016 · 1 comment
Closed

响应式布局 媒体查询 #43

Wscats opened this issue Jul 14, 2016 · 1 comment
Labels
notes

Comments

@Wscats
Copy link
Owner

Wscats commented Jul 14, 2016 •
edited

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
首先这句代码在移动端开发是基本会出现的，它意思就是：整个网站的宽度让它默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。基本所有常用的浏览器都能设置这句话，IE9也是可以的。比较老的IE6、7和8就需要写另外的兼容。

  • width - viewport的宽度 height - viewport的高度
  • initial-scale - 初始的缩放比例
  • minimum-scale - 允许用户缩放到的最小比例
  • maximum-scale - 允许用户缩放到的最大比例
  • user-scalable - 用户是否可以手动缩放

媒体查询

<link href="css/wsscat.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/wsscat1.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/wsscat2.css" rel="stylesheet" type="text/css" media="print" />

引入样式都有一个共同的属性media，media就是用来指定特定的媒体类型
如屏幕screen和打印print的样式表，当然还有其他的，比如说TV,handheld等，其中all表示的是支持所有媒体介质

and是一个关键词，还有not,only,all

<!--not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备-->
<link rel="stylesheet" media="not screen and (max-width: 1200px)" href="wsscatTv.css" type="text/css" />

only关键字意思是用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="wsscatOnly.css" type="text/css" />

media中如果没有明确指定类型，那么其默认为all
<link rel="stylesheet" media="(min-width: 481px) and (max-width: 900px)" href="wsscat.css" type="text/css" />
上面这句没有media属性所以默认是all
文字用
@Wscats Wscats added the notes label Jul 14, 2016
@Wscats Wscats changed the title 响应式布局 响应式布局 媒体查询 Jul 16, 2016
@Wscats
Copy link
Owner Author

Wscats commented Sep 12, 2016 •
edited

JS动态监听屏幕的宽度，实现网页响应
当我们更改屏幕的宽度的时候，就会动态改变样式

window.addEventListener("resize",function(){
            document.querySelector('body').style.fontSize = document.body.clientWidth/20+'px';
            console.log(document.body.clientWidth);
})

@Wscats Wscats closed this as completed Aug 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
notes
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Wscats