移动端页面布局需要注意的一些问题

最新推荐文章于 2023-01-28 21:13:42 发布
最新推荐文章于 2023-01-28 21:13:42 发布
阅读量105 收藏
点赞数
原文链接：http://www.cnblogs.com/haley168/p/mobilePhone.html
版权

1.页面不是一屏的时候，height就不要100%了，100%的意思就是显示一屏。

转载于:https://www.cnblogs.com/haley168/p/mobilePhone.html

weixin_30847271
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端REM布局与ViewportVW布局的实例运用
08-10
- 注意性能问题：大量使用VW可能导致重绘频率过高，影响性能。 **三、两者比较** 1. **灵活性** REM更适用于需要精确控制布局的场景，而VW适合快速实现简单的响应式设计。 2. **兼容性** 两者在现代浏览器中都...
移动端Web页面的CSS3 flex布局快速上手指南
12-13
1、开始使用flexbox布局的方法，代码如下： CSS Code复制内容到剪贴板 footer{ display:flex; }  2、接下来为footer添加flex-flow属性： CSS Code复制内容到剪贴板 flex-flow:row wrap;  row表示按行显示，...
移动端页面注意事项
weixin_55873644的博客
01-28 281
新手移动端页面注意事项
总结移动端页面开发时需要注意的一些问题
dengqiu9793的博客
01-21 288
1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport 有些手机网站我们看到如下声明： <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&g...
初学移动端界面设计需要注意的问题
qq_43642464的博客
08-29 214
移动端界面设计需要注意的问题 通常对于初学者，客户端的界面设计通常宽度我们都是给定具体数值的，但是在编写移动端的时候，与客户端是不太相同的。下面是我们需要注意的问题。 1.宽度 width要设置成百分比，而不能设置成具体数值。 2.高度通常我们不做限定，根据内容的高度决定 3.对于横向外边距（margin）内边距(padding)我们党的取值也应当是百分比，虽然在纵向可以使用具体数值，但是我们一般不推荐使用。 4.对于高度和宽度，我们还可以通过屏幕的高度和宽度设定， 100vh指的是屏幕的宽度，100vd屏
移动端开发过程中需要注意的问题
Olivia_Yu_的博客
06-27 1632
1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport 使用view-port使页面禁止缩放，通常把user-scable设置为0 来关闭用户对页面视图缩放的行为，也可以写成user-scalable=no  2、苹果手机的设置 如果content 设置为yes,Web应用会以全屏模式运行，反之，则不会。cont
移动端布局注意事项
wly_syp的博客
11-26 200
手机端开发须知简介             1.设备独立像素             就是屏幕的大小，也可以说是屏幕的尺寸（别名叫点，属于一个单位）             获取方法：window.screen.width/window.screen.height             注意：                 1.横竖屏切换的时候，真机里的这个值不会改变，但是在模拟器里面是会改变...
Web移动端布局那些事
09-27
总的来说，Web移动端布局需要综合运用rem、`viewport`和Flexbox等技术，并注意它们在不同环境下的表现和兼容性问题。随着技术的发展，移动端布局将更加灵活和高效，开发者需要持续学习和适应新的布局方式。
移动端布局之流式布局（百分比布局）
06-06
在进行流式布局时，需要注意以下几点： 1. 媒体查询（Media Queries）的应用：根据设备的屏幕尺寸调整布局，实现更好的响应式效果。 2. 兼容性检查：虽然现代浏览器对Flexbox和Grid支持良好，但老版本或某些特定...
移动端rem布局 demo，可以作为简单参考
06-13
总的来说，这个"移动端rem布局 demo"是一个学习和实践REM布局的好起点，可以帮助开发者了解如何创建响应式的移动端界面，同时提醒我们注意潜在的问题，如CSS3动画的兼容性和JavaScript优化。通过深入研究这个demo，...
移动端 页面布局时需要注意的几项常见要点
yinkangxue的专栏
11-09 200
一、当用户tap一个页面元素时，iOS会在元素周围显示橙色的外框，以表明该元素被tap了。如果你想自己实现tap时的响应效果，可以用以下方法“去除”这个高亮效果 .-webkit-tap-highlight-color: rgba(0,0,0,0); 二、禁止用户选择页面文字. -webkit-user-select: none;三、如果你响应onclick事件，会发现click事件有大约半秒的延迟
移动端页面坑
u598975767的专栏
04-10 640
对于前端开发者来说移动端存在更多的挑战，移动端页面开发过程中会碰到各种各样千奇百怪的问题（我们俗称BUG或坑），那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧。 移动端页面在不同设备、不同操作系统 、不同运行环境下都可能造成各种各样的没有碰到过的的坑，相比曾经的IE6坑多了。下面先介绍一下4类具体常见的坑： 1、外观 A、页面高度渲染错误 在各移动端浏览
移动前端的坑
07-01 87
先介绍一下项目环境，前端工具使用fis-plus，主要使用了zepto插件。整体架构比较简单。 在这里我们不讨论viewport布局（使用viewport貌似坑会少很多，但是由于条件限制，有时只能使用原始方法开发），下面进入正题： 零、调试工具 推荐大家在调试移动端页面时使用chrome的toggle device mode。 在此模式下可以随...
经验总结——静态页面布局中的常见问题
fisher
08-20 5469
本文总结了个人在前端开发中经常遇到的布局问题，长期更新
移动端才坑注意事项
weixin_34248118的博客
11-11 803
为什么80%的码农都做不了架构师？>>> ...
移动端界面注意事项
weixin_30905133的博客
08-03 81
1. 需添加以下代码使尺寸适应于移动端 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="HandheldFriendly" content="true"> <meta name="MobileOptimized" content="...
移动端前台页面需要注意的几点
small_33的博客
04-08 717
移动端相对于PC端的页面最大的不同就是移动端的页面需要适配任何尺寸的手机屏幕：   1. 首先移动端页面的高度最好不要设置，因为不管实际文档的高度有多高，手机是可以上下滑动的；   2. 布局上，左右的布局最好使用弹性布局（弹性布局就是比如一个父级div下有两个子级div ---A、B，父级元素给display: flex; 子级A的div给 flex: 1; B不做操作），这样B宽度就是实际内容...
第一册读写答案.txt
最新发布
07-04
第一册读写答案
移动端开发前端需要注意什么
07-27
移动端开发前端需要注意以下几点： 1. 理想视口：为了在移动端有最理想的浏览和阅读宽度，需要设置理想视口。理想视口的宽度应该与设备的宽度一致，可以通过添加meta视口标签来实现。\[1\] 2. 布局方式：在移动端开发中，可以选择不同的布局方式，如流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局等。根据项目需求和开发经验选择合适的布局方式。\[2\] 3. 响应式布局：响应式布局是一种能够适应不同屏幕尺寸的布局方式。通过使用媒体查询来适配不同的屏幕尺寸，使页面在不同设备上都能有良好的显示效果。\[2\] 4. 文件结构：在搭建移动端开发的文件结构时，需要考虑到不同设备的兼容性和性能优化。合理组织文件结构，减少不必要的请求和文件大小，提高页面加载速度。\[2\] 总结起来，移动端开发前端需要注意理想视口的设置、选择合适的布局方式、使用响应式布局和优化文件结构等方面。这些注意事项可以帮助开发者在移动端上实现良好的用户体验。 #### 引用[.reference_title] - *1* *3* [前端开发之移动端基础](https://blog.csdn.net/u013773608/article/details/110735612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Web前端开发 移动端开发（快速入门）](https://blog.csdn.net/weixin_46127956/article/details/127800253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值