HTML-制作手机页面时,如何能使页面适应各个设备的大小

HTML-制作手机页面时,如何能使页面适应各个设备的大小

夜无邪 发布于 2017-05-13 字数 84 浏览 1179 回复 5

在手机页面的css制作过程中需要注意些什么,能使页面能适应大部分设备而不会变形。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

想挽留 2017-10-06 5 楼

通过javascript判断屏幕大小,在启用对应的样式。

夜无邪 2017-09-08 4 楼

可以考虑采用css3中支持的MediaQuery方法来做设备适配

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

http://www.quirksmode.org/mobile/viewports2.html

泛泛之交 2017-08-11 3 楼

推荐一篇文章,里面提到的各种技术可以解答你的问题,
英文链接:http://www.developerdrive.com/2012/08/7-tools-for-responsive-web-design/

中文介绍如下:
响应式Web设计是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化。如今,响应式开发网站引入了一组新的工具以帮助开发者快速学习规则,开发跨浏览器和构建快速、有效的跨平台网站。本文搜集了一些工具和资源,你可以利用这些工具高效、快速地创建响应式Web设计。

Adaptive Images

随着智能机的流行,用户越来越来喜欢用手机或平板电脑来查看信息。这对网站来说有一定的挑战,除了小屏幕带来的挑战,图像大小也是值得考虑的问题之一。幸运的是,自适应图片——一个PHP脚本文件可运行于任何网站。自适应图片可以自动检测屏幕尺寸,并作出相应调整的HTML版图片,最终帮助你提供适用于小屏幕上的小图片。

FitText

你曾想过开发流动布局时在自动伸缩头条部分填写父元素的宽度吗?jQuery插件可以帮助你调整字体大小,并且确保这些字体适用于各种设计或浏览器。

PhotoSwipe

你知道可以从桌面向移动设备传送自定义的高清图片集吗?这款免费的HTML/CSS/JavaScript库允许开发者和设计师在网页上增强本地应用观感,能够给访问者提供一个更直观的界面与你的移动网站进行交互。它兼容所有流行的Javascript库和框架。

Less Framework

当创建多种布局网站时,最重要的一点就是保持一致性。该布局基于同一种网格,尽可能地重用元素。你只需调整宽度、字体大小或者其他的小细节。这也是减少使用框架的主要原理。拥有同一个基线网格,每个人都可以自由的保持自己的编码风格,但前提必须确保一致性。

Skeleton

使用CSS文件可以快速的响应网站。Skeleton利用轻量级的960-网格作基础,使笔记本电脑浏览器窗口到移动窗口屏幕在横向和纵向的格式之间进行随意的缩放。它配备了任何移动网站基础构成要素包括轻量级的模式,标签,按钮以及其他元素。

Responsive Testing Tool

针对响应式网站开发,在开发期间如何进行测试?事实说明浏览器的安全性能不会让你在帧中导航。Matt Kersley——一位设计师和开发者设计了一款测试工具来帮助你解决此问题。你可以在Github上下载这款工具并安装以便在开发过程中进行测试。

Inuit CSS Framework

随着HTML5支持,inuit.css为开发流体网格配备了一个自定义网格生成器。这是一款渐进、灵活的框架,它设置了合理的界限可以让你做任何想做的事情。

偏爱自由 2017-07-11 2 楼

获取屏幕大小。根据屏幕大小实现缩放。不过手机页面最好不要用过于复杂的css。

想挽留 2017-07-10 1 楼

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>加上这句话

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放

关于viewport的使用可以参考这里http://www.quirksmode.org/mobile/viewports2.html