css3 iphone5的媒体查询怎么写

html-css013

css3 iphone5的媒体查询怎么写,第1张

可以用谷歌浏览器里面有iPhone5的尺寸,然后用媒体查询它的宽度就行了

媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分。

媒体查询有两个关键词min-width和max-width, 接触过媒体查询的同学可能会认同我, 这两个关键词很绕;从字面上理解它们可能不那么容易,以至于我每次都需要在脑海里面不断演算,然后小心翼翼地测试效果(大概和写正则表达式的感觉差不多)。

需要提醒一下的是CSS的优先级概念,在样式表中越后的样式优先级越高,就是后面的样式会覆盖前面的样式。在这个例子中,我们先设定了默认颜色为灰色。如果width大于960px的,会显示灰色。

假设width为750px,会先匹配到灰色,再匹配红色,最终显示了橙色。由于width等于750px,它不在0-550px和0-320px这个范围,浏览器不会解析这些样式。

这位网友你好,这是媒体查询代码,表示只有在屏幕尺寸小于639像素的时候才会应用下面的样式。如果想要在手机端自适应,你还需要写上下面这句话。

<meta name="viewport" content="width=device-width, initial-scale=1"/>

不是随便添加句话就可以自适应手机屏幕的,没这么简单。如果要自适应手机,是要用到rem单位的,然而rem又要搭配媒体查询来使用。

例如你的设计稿如果是宽720px的话,那你的文字就要以原始大小除以11.25,例如16px的话就要16/11.25这样来计算。我的意思是不用像素,用rem,因为px是写死的,rem是可以适应手机端的(包括盒子的宽高都是要以rem来计算)。另外,用之前要把下面这段代码放到你css文件里:

@media only screen and (max-width: 1080px) {

html, body {

font-size: 16.875px

}

}

@media only screen and (max-width: 960px) {

html, body {

font-size: 15px

}

}

@media only screen and (max-width: 800px) {

html, body {

font-size: 12.5px

}

}

@media only screen and (max-width: 720px) {

html, body {

font-size: 11.25px

}

}

@media only screen and (max-width: 640px) {

html, body {

font-size: 10px

}

}

如果宽是720,就除以它相对应的那个值,如果是宽960,就除以960相对应的那个值,这么说应该可以明白吧。

纯手打,望采纳~