css怎样做根据手机屏幕宽度调整样式？

html-css011

css怎样做根据手机屏幕宽度调整样式？,第1张

nav{font-size:16px}

@media screen and (min-width:320px){/*当屏幕宽度大于等于320像素,nav的字体改为14，这种方法不用刷新的，自动判断的，但必须要写在原本样式下面*/

    nav{font-size:14px}

}

/*同理*/

@media screen and (max-width:320px){/*宽度小于等于320,同理*/

}

两种方式：一种方式，手机站css设置的时候全部用百分比来控制，这样所有的页面都会自动缩放；

第二种方式：需要你来判断浏览器的或者应该说是手机屏幕的大小，来设置其css样式：如：

当然我只是举个例子，其余的样式你可以自己设置，你设置个最大宽度与最小宽度max-width与min-width，一般都是320px--640px手机；

@media screen and (max-width:360px){body{font-size:12px}}

@media screen and判断如果浏览器宽度小于360px的话，执行样式，文字大小为12px

@media screen and (min-width:400px){body{font-size:18px}}

意思：判断浏览器宽度大于400px的时候，执行样式，文字大小为18px；