84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
比如做的页面是固定尺寸640px(包括背景图片等都是固定尺寸), 如何让其在320px尺寸的手机上显示为320px大小?也就是字体图片等都为正常的50%,而不出现滚动条等?
更新:不是想要bootstrap那种使用@media的响应式布局效果,想要的是单纯的显示页面大小的50%。
学习是最好的投资!
配置viewport 例如:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
利用 @media 进行响应式设计http://www.w3cschool.cc/bootstrap/bootstrap-v2-responsive-design.html
或者在进行 css 编写时使用 百分比 设置元素的宽高,使用 em 设置字体的大小等等
更多信息请搜索响应式页面设计
利用CSS3的媒体查询吧,根据不同的尺寸设计不同的CSS样式
@media screen and (max-width: 320px) { body { background-color:lightblue; } }
如果想图方便的话考虑一下使用前端框架,比如Bootstrap等,里面有一个栅格(grid)的的概念http://v3.bootcss.com/css/
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin,用于生成更具语义的布局。
用Bootstrap框架,有一套响应式设计的css样式的,依次响应小型、中型、大型设备的屏幕尺寸。
width:100%不就行了吗?
所有的东西都变成相对的,元素长宽,字体大小,啥啥都是相对的。 相对的最终父元素却是绝对的,长宽可以自动获取屏幕的100%,可是字体大小呢? html和css没有那么智能和自动的,还是需要手动用媒体查询去设置每种分辨率下的html字体大小,不然他咋知道该是什么字号。。。
现在比较流行的做法是使用rem作为单位,然后动态的改变rem对应的px值来达到目的(js监听resize事件,或者写用媒体查询) 当然更为暴力的做法,你可以直接使用zoom,计算好缩放比后设置。
使用viewport应该是可以的
请使用响应式布局
单位 VW/VH
配置viewport
例如:
利用 @media 进行响应式设计
http://www.w3cschool.cc/bootstrap/bootstrap-v2-responsive-design.html
或者在进行 css 编写时使用 百分比 设置元素的宽高,使用 em 设置字体的大小等等
更多信息请搜索响应式页面设计
利用CSS3的媒体查询吧,根据不同的尺寸设计不同的CSS样式
如果想图方便的话考虑一下使用前端框架,比如Bootstrap等,里面有一个栅格(grid)的的概念
http://v3.bootcss.com/css/
用Bootstrap框架,有一套响应式设计的css样式的,依次响应小型、中型、大型设备的屏幕尺寸。
width:100%不就行了吗?
所有的东西都变成相对的,元素长宽,字体大小,啥啥都是相对的。
相对的最终父元素却是绝对的,长宽可以自动获取屏幕的100%,可是字体大小呢?
html和css没有那么智能和自动的,还是需要手动用媒体查询去设置每种分辨率下的html字体大小,不然他咋知道该是什么字号。。。
现在比较流行的做法是使用rem作为单位,然后动态的改变rem对应的px值来达到目的(js监听resize事件,或者写用媒体查询)
当然更为暴力的做法,你可以直接使用zoom,计算好缩放比后设置。
使用viewport应该是可以的
请使用响应式布局