开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >在Google App Maker中融入响应式设计

问在Google App Maker中融入响应式设计
EN

Stack Overflow用户

提问于 2018-10-10 15:41:40

回答 1查看 411关注 0票数 0

我一直在寻找一种适当的方法，使我的设计响应性和易于在移动设备上使用，在谷歌应用程序制造商。使用'auto‘的水平宽度或垂直高度确实有助于这一点，但即使使用vw的css字体大小调整文本的大小，也会导致我的内容与移动设备和web不兼容。任何想法如何让谷歌应用程序制造商更加‘移动友好’，可以说，将非常感谢。

responsive-design

google-app-maker

云开发个人版免费体验1个月

云开发是云原生一体化开发环境和工具平台，提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用

EN

回答 1

Stack Overflow用户

发布于 2019-07-26 20:57:23

最好的选择是从灵活的布局开始。如果设置fit to content或fill parent，面板将调整为可用空间，小部件将通过设置minWidth、maxWidth、minHeight和maxHeight在可用空间中缩放。

在此之后，您可以设计CSS格式，针对您的目标屏幕大小调整布局。

根据用于page styles的谷歌应用程序制造商指南

要自动调整不同屏幕大小的布局，请在全局CSS中使用媒体查询。有关响应式设计的介绍，请参阅Responsive Web Design Basics。有关示例，请参见Responsive layout grid。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52744026

复制

相关文章

响应式设计

IMWeb前端团队

2017/12/29

2.5K0

响应式设计

布局浏览器设计响应式设计移动端

给所有用户提供同一份 HTML 和 CSS。通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。网页设计师 Ethan Marcotte 称这种方式为响应式设计（responsive design）。

Cellinlab

2023/05/17

2.2K0

响应式设计

一般是想通过各种方式来实现弹性图片的效果，在实现原理中也提供了几种方案，这里具体说明

IMWeb前端团队

2019/12/03

1.9K0

css新单位vw,vh在响应式设计中的应用

css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小，”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。参照demo案例对照下面四个容器的css样式:

TimothyJia

2022/05/05

1.1K0

响应式设计笔记

css http javascript html html5

HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表。比如，一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性，扩展了媒体类型的功能。

用户9127725

2022/08/08

1.1K0

rem在响应式布局中的应用

最近做了一些响应式的页面，遇到了一些问题，想了些解决方法，在这里总结一下。目前响应式的主流实现方式是百分比布局，加上媒体查询@media screen。关于媒体查询还有媒体查询的一些兼容性问题，网上介绍的很多

用户9127725

2022/08/08

1.7K0

手机响应式网站设计_如何做响应式网页设计

网站 https html http 网络安全

这个问题困扰了我好久，在PC上我们惯用的px单位在手机上根本不适用，即使我们写了<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>防止网页自动缩放也无济于事，因为各手机分辨率大小不同。

全栈程序员站长

2022/09/20

1.4K0

[读书笔记]响应式web设计转

@media screen and (max-device-width:400px){

LeoXu

2018/08/15

3.7K0

RxJS 在 Angular响应式表单中的使用

html rxjs filter form status

FormControl 的 valueChanges 属性和 statusChanges 属性包含了会发出变更事件的可观察对象。例子

mafeifan

2019/03/04

5.4K0

响应式网页设计指南

如何理解响应式设计（RWD）响应式网页设计的概念最初是由 Ethan Marcotte 提出，从设计的角度引领我们思考：为什么一定要为每个用户分别做一套设计方案呢？是否可以有一种设计能够根据不同设备

码云Gitee

2018/03/29

2.5K1

Bootstrap响应式图表设计

在Bootstrap框架中并没有提供完整的响应式图表功能，不过可以引入强大的、基于JavaScript的、完全开源的第三方图表插件，并基于Bootstrap框架良好的兼容性来整合这些第三方插件，最终设计出性能优越的响应式图表为了实现基于Bootstrap框架的响应式图表的设计，引用了Bootstrap框架、jQuery框架和ECharts插件所需要的脚本文件、样式文件和资源文件，并自定义了相关样式文件和资源文件

别团等shy哥发育

2023/02/25

1.6K0

Bootstrap响应式图表设计

【CSS】：响应式设计——REM

https 网络安全 iphone ios 编程算法

Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).

WEBJ2EE

2020/11/05

2K0

【CSS】：响应式设计——REM

响应式网页设计指南

1、如何理解响应式设计（RWD）响应式网页设计的概念最初是由Ethan Marcotte提出，从设计的角度引领我们思考：为什么一定要为每个用户分别做一套设计方案呢？是否可以有一种设计能够根据不同设

奔跑的小鹿

2018/03/16

1.6K0

浅谈前端响应式设计（一）

redux mobx ecmascript react

现实世界有很多是以响应式的方式运作的，例如我们会在收到他人的提问，然后做出响应，给出相应的回答。在开发过程中我也应用了大量的响应式设计，积累了一些经验，希望能抛砖引玉。

有赞coder

2020/08/25

6260

什么是响应式布局设计

描述响应式界面最著名的一句话就是“Content is like water”，成中文 “ 如果将屏幕看作容器，那么内容就像水一样 ” 。

微风-- 轻许--

2019/05/25

1K0

浅谈前端响应式设计（二）

rxjs redux javascript node.js mobx

上一篇文章提到了几种响应式的方案，以及它们的缺点。本文将介绍 Observable以及它的一个实现，以及它在处理响应式时相对于上篇博客中的方案的巨大优势（推荐两篇博客对比阅读）。

有赞coder

2020/08/25

1.1K0

媒体类型和响应式设计

二、媒体类型引用方法：link标签，xml方式，@import和css3新增的@media四种

IT人一直在路上

2019/09/18

1.5K0

Web语义化、响应式设计

css 搜索引擎

Web语义化 Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。如果可以在合适的位置使用恰当的标签，那么写出来的页面语义明确，结构清晰，搜索引擎也可以认出哪些是页面重要内容，予以较高的权值。响应式Web设计响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。表现与结构分离在之前一代的网页设计中，网页的表现和结

陈树义

2018/04/13

8040

web app响应式字体设置！rem之我见

之前做沙漠教育的时候，直接以设计图为准，然后强暴式，缩放处理。简单。直接，粗暴！但是，开发快。……一劳永逸！

周陆军

2018/05/02

1.7K8

web app响应式字体设置！rem之我见

干货 | 响应式设计在携程火车票的应用

html5 php 网站

可能很多人脑海中已经出现了这样一个动画，当浏览器中页面尺寸不断变化时，内容也在随之变化。简单说，响应式网站设计是一种允许设计和代码响应设备屏幕大小的方法。

携程技术

2020/12/02

5900

相似问题

如何让响应式设计顺畅地融入移动设计？

115

Google App maker架构

10

Google App maker API

10

使用参数调用Google App Maker App

33

Google app maker测试方法

10

活动推荐

运维排障、用户行为分析快人一步，福利多！

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例