首页  >  问答  >  正文

javascript - 如何让web页面根据客户端尺寸自动缩放?

比如做的页面是固定尺寸640px(包括背景图片等都是固定尺寸),
如何让其在320px尺寸的手机上显示为320px大小?也就是字体图片等都为正常的50%,而不出现滚动条等?

更新:不是想要bootstrap那种使用@media的响应式布局效果,想要的是单纯的显示页面大小的50%。

PHPzPHPz2751 天前1199

全部回复(11)我来回复

  • ringa_lee

    ringa_lee2017-04-10 15:05:23

    配置viewport
    例如:

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    

    回复
    0
  • 迷茫

    迷茫2017-04-10 15:05:23

    利用 @media 进行响应式设计
    http://www.w3cschool.cc/bootstrap/bootstrap-v2-responsive-design.html

    或者在进行 css 编写时使用 百分比 设置元素的宽高,使用 em 设置字体的大小等等

    更多信息请搜索响应式页面设计

    回复
    0
  • 高洛峰

    高洛峰2017-04-10 15:05:23

    利用CSS3的媒体查询吧,根据不同的尺寸设计不同的CSS样式

    @media screen and (max-width: 320px) {
        body {
            background-color:lightblue;
        }
    }
    

    如果想图方便的话考虑一下使用前端框架,比如Bootstrap等,里面有一个栅格(grid)的的概念
    http://v3.bootcss.com/css/

    Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin,用于生成更具语义的布局。

    回复
    0
  • 阿神

    阿神2017-04-10 15:05:23

    用Bootstrap框架,有一套响应式设计的css样式的,依次响应小型、中型、大型设备的屏幕尺寸。

    回复
    0
  • PHP中文网

    PHP中文网2017-04-10 15:05:23

    width:100%不就行了吗?

    回复
    0
  • 怪我咯

    怪我咯2017-04-10 15:05:23

    所有的东西都变成相对的,元素长宽,字体大小,啥啥都是相对的。
    相对的最终父元素却是绝对的,长宽可以自动获取屏幕的100%,可是字体大小呢?
    html和css没有那么智能和自动的,还是需要手动用媒体查询去设置每种分辨率下的html字体大小,不然他咋知道该是什么字号。。。

    回复
    0
  • 高洛峰

    高洛峰2017-04-10 15:05:23

    现在比较流行的做法是使用rem作为单位,然后动态的改变rem对应的px值来达到目的(js监听resize事件,或者写用媒体查询)
    当然更为暴力的做法,你可以直接使用zoom,计算好缩放比后设置。

    回复
    0
  • 怪我咯

    怪我咯2017-04-10 15:05:23

    使用viewport应该是可以的

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 15:05:23

    请使用响应式布局

    回复
    0
  • 大家讲道理

    大家讲道理2017-04-10 15:05:23

    单位   VW/VH
    

    回复
    0
  • 取消回复