84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
我写了个移动端的页面,有添加<meta name="viewport" content="width=device-width,initial-scale=1.0">现在想在PC端打开,如何设置最大宽度,不让页面放大,类似http://m.yougou.com/这样
学习是最好的投资!
body max-width margin:0 auto body内的容器也是max-width 加overflow:hidden margin:0 auto
自己打开F12看就行了
当然是设置页面的宽度啦width,max-width。你提供的这个页面将最大宽度设置为了max-width: 640px;。
width
max-width
max-width: 640px;
what?这个都有人踩?
在提供一个m.taobao.com实例
用js判断可以不?修改默认基数
设置max-width还以试试@media
先放两张图示意我的做法:图1:
图2:
用不用rem不是关键,我这个页面是用了vue+weui搭建的,因为加了viewport,css单位全部使用px,并没有使用rem布局。
只要你加了viewport,移动端的1px==pc端的1px
由于weui本事用了自适应布局,我就只是简简单单把内容包装在一个p里面,然后使用@media查询页面宽度,当查到页面的宽度是移动端的[即页面宽度小于768px]的时候,将那个p全屏。否则则将该p的宽度设置为768px[ipad的宽度],然后里面的内容自适应。
@media
自己打开F12看就行了
当然是设置页面的宽度啦
width
,max-width
。你提供的这个页面将最大宽度设置为了
max-width: 640px;
。what?这个都有人踩?
在提供一个m.taobao.com实例
用js判断可以不?修改默认基数
设置max-width
还以试试@media
先放两张图示意我的做法:
图1:
图2:
用不用rem不是关键,我这个页面是用了vue+weui搭建的,因为加了viewport,css单位全部使用px,并没有使用rem布局。
只要你加了viewport,移动端的1px==pc端的1px
由于weui本事用了自适应布局,我就只是简简单单把内容包装在一个p里面,然后使用
@media
查询页面宽度,当查到页面的宽度是移动端的[即页面宽度小于768px]的时候,将那个p全屏。否则则将该p的宽度设置为768px[ipad的宽度],然后里面的内容自适应。