怎样编写只有手机浏览器支持的css呢?

html-css018

怎样编写只有手机浏览器支持的css呢?,第1张

w3c的html规范中有规定了引入css文件所针对的设备,可以通过在标签上添加media属性来指定所引入的css文件支持的设备,那针对手机这种移动设备,设置media属性值为"handheld"。示例代码如下:不过得注意:大部分的浏览器都有支持这个media属性,而小部分浏览器是不支持它的,那么如果想兼容所有的这些浏览器,建议还是为手机版本的网页单独做一套HTML和CSS,这样就不用支持pc的和支持移动终端的css写在一起然后用media来区分了。

不是随便添加句话就可以自适应手机屏幕的,没这么简单。如果要自适应手机,是要用到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相对应的那个值,这么说应该可以明白吧。

纯手打,望采纳~

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<head>标签中,输入meta代码:<meta name="viewport" content="width=device-width, initial-scale=1">。

3、浏览器运行index.html页面,此时PC端的网页在移动端上也能自动适配。