首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何将此网站转换为移动网站或使其具有流动性?

问如何将此网站转换为移动网站或使其具有流动性?
EN

Stack Overflow用户
提问于 2011-09-12 20:37:40
回答 2查看 602关注 0票数 0

我想知道是否有一种方法可以将静态页面转换为移动页面。通过移动页面,我的意思是可以将桌面内容拖动到较小的窗口大小(例如,智能手机大小: 320px)。使内容遵循窗口的大小?如何更改css?我需要如何做数学运算呢?谢谢……我想一定有框架或工具来实现这一点吧?

请提供一些指导和想法,我们将非常欢迎。

检查我的此静态example

感谢您的宝贵时间!Y/

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-09-12 20:42:20

@Yoni;您可以使用mediaqueries在该媒体查询中定义您的css

而是在html页面中定义<meta name="viewport" content="width=device-width" />

还有其它链接http://css-tricks.com/6206-resolution-specific-stylesheets/、http://webdesign.about.com/od/css3/a/css3-media-queries.htm

票数 0
EN

Stack Overflow用户

发布于 2011-09-12 20:39:59

您可以使用Media Queries。有关更多信息,请参考Responsive Web Design: What It Is and How To Use It。

我的建议是,你首先在设计网站时不要定位任何东西。只需将其充实,并决定排版,颜色等(即: design.css)。

然后使用媒体查询开始适当的定位。对于宽度至少为960像素的视口(例如: design-960.css),它将如下所示:

代码语言:javascript
复制
@media only screen and (min-width: 960px)
{
    // [...]
}

对于最多359像素宽的视口(例如: design-240.css),它将如下所示:

代码语言:javascript
复制
@media only screen and (max-width: 359px)
{
    // [...]
}

诸若此类。您将需要以下代码,以便在移动设备上以适当的比例呈现:

代码语言:javascript
复制
<meta name="viewport" content="width=device-width; initial-scale=1"/>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7387977

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档