当前位置: 首页 > Web前端 > HTML5

css---Responsive---Mediaquery

时间:2023-04-05 01:08:43 HTML5

Responsive我自己的理解是限制像素范围然后写一套cssHTML写两套或者更多,但是只显示一套其实现在!!!很少有网站是以响应式方式编写的。一些主流的,比如某宝,是通过js判断的,即做PC端和移动端,看用户是用电脑还是手机。根据判断结果更改页面地址,为什么还要?学习它。..应对面试啊!反正不难学,就学方法一——css写法//CSS@media(max-width:320){//执行320像素以下的css范围:0~320body{background:red}}@media(min-width:321)and(max-width:375){//cssrange:321~375body{background:blue}}@media(min-width:376){//cssrange:376~positiveinfinitybody{background:purple}}方法二--链接写法用文件替换内容应用响应式时:先做手机再做网站---Mobilefirst[建议】先做网站再做手机---桌面先用js判断是网站还是手机写不同的地址//jsfunctionjudge(){if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|WindowsPhone)/i))){//window.location.href="手机网址";alert("mobile")}else{//window.location.href="pc-sideurl";alert("pc")}}judge();meta标签作用:标签是告诉浏览器不要缩放