原创

移动端网页设计初探

小郝不负流年
小郝不负流年   + 关注
2020-11-09 22:04:54   阅读18   评论0

现在人人不离手机,移动端流量远超PC端。所以好的移动端网页设计是重中之重。

关于PC端、移动端网站的自动适配,请移步我的另一篇文章:《nginx配置适配移动端和PC端访问网站


下面是我在开发移动端网站之前做的一些学习笔记。

1、分辨率

参考:https://www.cnblogs.com/mtl-key/p/7126819.html

1)使用viewport:这已经是移动端网页的必备了,它可以设定页面的宽度,是否允许缩放等等

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

  • 一般设置width=device-width,就是设置为设备的屏幕宽度,当然也可以是具体数值

  • 2)百分比与max(min)-width使用:移动端网页不仅分辨率不一,而且随时可以横竖屏切换,所以百分比宽度设定非常必要,再配合max(min)-width限制最大(小)宽度,能有效的适应各种分辨率,若为此还有特别需求,可看下一条,"使用Media Queries"

  • 使用Media Queries,这也是响应式web设计的一部分

  • link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 640px)"

    这里的意思就是在大于640px的屏幕宽度下,使用style1样式,也可以写在样式内部,如:

    @media screen and (min-width: 640px){        .d1{background:#ccc;}        }


2、内容与缓存

  • 1)使用manifest缓存

    浏览器将缓存chache内所有的内容,并且可以离线访问,只要文件发生任何改变都将会重新读取并刷新全部缓存,所以更改注释是个更新缓存的好方法

    这里要注意的是
    1,添加了manifest的当前网页也会被缓存 所以推荐的方式是页面缓存,页面动态内容全部用ajax获取,所以在移动网站项目设计开始就要注意这个问题
    2,页面中添加iframe 然后子页面引用manifest想达到缓存资源而不缓存当前页面内容,是无效的。

2)尽可能使用css样式来代替图片,由于移动端浏览器对css3的支持,使得以前很多图片可以用样式来代替 

  • 按钮用到了  渐变+圆角+内阴影
    .btn_red {
    display: block;
    line-height: 28px;
    padding: 1px 0;
    border: 1px solid #B81414;
    border-radius: 2px;
    background: #FF5A5A;
    background: -webkit-gradient(linear, 0 0, 0 70%, from(#FF5A5A), to(#FF4444));
    overflow: hidden;
    margin-top: 3px;
    color: #fff;
    box-shadow: 0px 1px 1px #FFB5B5 inset;
    }
    三角形 就是用border的颜色,改变颜色可以画出指向不同方向的三角形
    .tip_t{
    border-color: transparent transparent #bb0808 transparent;
    border-style: solid;
    border-width: 10px;
    width: 0px;
    height: 0px;
    }
    箭头是两个三角形叠在一起
    ……
    用样式代替图片之后不仅大小减少了很多,可维护性更大大提高
  • 3)页面只展示部分内容,多提示用户"点击展开"或者"查看更多",再异步获取内容,大家都不希望打开一个网站,流量就哗哗没了


3、布局

手机端可视区域小,布局上不同于传统网页,需要充分利用有限的空间去展示信息。

  • 1)页面流程简单清晰,复杂的操作尽量分段展示
  • 2)隐藏不常用的功能,可以将其放在侧边栏或弹出层
  • 3)由于移动端是直接用手指操作,而非鼠标。所以,需要响应元素点击区域要相对明显,大
  • 屏幕宽度虽小,但是上下滑动体验好,因此布局上可以多上下排列

4、适配布局、rem布局、文字适配等

https://www.cnblogs.com/mtl-key/p/7126937.html

https://www.cnblogs.com/mtl-key/p/7126839.html 


5、其他

  • 1)html5中input有好几种新类型,比如input type="tel" ,移动端上点击会默认弹出数字键盘。

2)使用scss

3)  百分比+rem布局 

4) 页面板块可横向滑动 

https://www.cnblogs.com/mtl-key/p/7126896.html

5)其他补充

https://www.cnblogs.com/mtl-key/p/7126809.html

6)移动端兼容性问题解决方案

https://www.cnblogs.com/mtl-key/p/7126776.html


对我有用,我要     转载  
文章分类: Web前端  
所属标签: 移动端  
  • 0条评论
  • 只看作者
  • 按时间|按热度
  • 由于本人多次涉及需要打印这个证明,而每次都会忘记入口,在网上各种搜索各种摸索很是浪费时间。故本次将操作流程整理记录下来,以备忘。同时也分享给大家。1、打开湖北政务服务网,地址:http://zwfw.hubei.gov.cn/s/index.html2、切换区域到“武汉市”3、在“特色服务”模块找到“(个人)武汉市社会保险公共服务平台”4、进入“(个人)武汉市社会保险公共服务平台”,登录账号密码<imgsrc="https://cdnstatic.hoscen.cn/blog/article/184053017752895488/img/497065960be44747825acb86a17483c1.png"style=
  • 1、找到nginx安装目录,找到nginx.conf ,  vi nginx.conf2、在http模块下面添加 server_tokens off;  ##隐藏版本号http {     ... 此处省略          server_tokens off;  ##隐藏版本号          ... 此处省略 }3、重启nginx4、效果如图,看不到版本号了
  • Thumbnailator,一个google开源的优秀的工具类 。根据提供的API可以快速实现图片缩放,区域裁剪,水印,旋转,保持比例 等操作。Thumbnailator官网:http://code.google.com/p/thumbnailator/ 本文主要讲图片原比例压缩功能。1、引入maven依赖2、demo测试public class TestImageUtil { public static void main(String[] args) throws IOException { String originImgPath = "C:UsersHoscenDesktopit.png"; String destImgPath = "C:UsersHoscenDesktopit-30.jpg"; Thumbnails.of(originImgPath) .scale(1f) .outputQuality(0.3f) .outputFormat("jpg") .toFile(destImgPath); } }3、测试结果原图,大小82.5kb<img src="https://static.hoscen.cn/blog/article/191329330033328128/img/5fa848b2b8f449bdb05dd78771777f83.png" style="width: 600px;" class="fr-fic fr-dib fr-fil
  • 一般我们在使用CDN时都设置有缓存时间,当源站资源发生变更后,如果缓存时间没到,那么用户访问的依旧是变更前的数据,虽说又拍云控制台提供了缓存刷新功能界面,但是每次都手动去刷新显示不太理想,当然又拍云也想到了这一点,提供给我们有API可以调用。本篇文章就是讲解如何接入又拍云缓存刷新API。网站免费接入又拍云CDN的方法,请查看我另外一篇文章,地址: https://www.hoscen.cn/blog/hao/articles/204022774975430656.html又拍云API文档:https://api.upyun.com/doc#/api/guide/overview看完文档,我们会知道又拍云提供有两个缓存刷新接口,一个支持通配符(但次数有限),一个是完整url刷新。同时注意调用接口时将 Token 放入 HTTP Header 中 。那么我们需要3个接口:1、获取token2、URL刷新3、缓存批量刷新详细请求参数和响应值请查看文档。话不多说,我们直接放上核心代码1、获取token2、URL刷新<img src="https://cdnstatic.hoscen.cn/blog/article/
  • 分享一个jQuery插件textarearesizer。它提供Resizer bar可拖动调整Textarea/div大小。代码示例:代码下载:    点击此处效果图:
  • 公益 404 页面介绍公益404页面是由腾讯公司员工志愿者自主发起的互联网公益活动。网站只需要在自己的404页面中嵌入一段简单的代码,就能通过互联网来迅速传播失踪儿童信息,从而提高找回失踪儿童的概率。失踪儿童信息来自宝贝回家寻子网。公益 404 页面接入方法:复制以下 js 代码,嵌入到您的 404 页面,可以自适应移动设备。<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"         homePageUrl="https://www.hoscen.cn/" homePageName="回到首页"></script>效果展示:注意事项:如果一个 404 页面的内容小于 512B,IE 会认为该 404 页面不够友好,在 IE 下将不会成功返回该 404 错误页面
  • 目录:1、安装node.js环境2、安装cnpm3、安装vue-cli脚手架构建工具4、用vue-cli构建项目5、安装项目所需的依赖6、项目运行7、项目打包1、安装node.js环境下载地址:https://nodejs.org/zh-cn/安装过程没有太多好说的,安装完成后 win+R打开命令行输入node -v , 如图,出现版本号说明安装成功。npm包管理器是集成在node中的 , npm -v可以查看版本2、安装cnpm由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时
  • XMind思维导图是做什么的,怎么使用,这些问题不在本次说明范围,本次就只做分享,一个XMind2020绿色免安装版分享!特点:1、无需安装,解压即用;2、可导出所有格式,不受限制;3、导出无水印;链接:https://pan.baidu.com/s/1jT0oXQS0Vxelsx1S2qVlRg 提取码:uew3 如果下载地址失效请留言反馈。资源来源朋友分享,仅供学习参考使用,请在下载后24小时内删除,请支持正版。
  • 网站内测进行中,为了发现未知的可能性错误,然后可以改正它,得到更加友好的网站用户体验。 欢迎大家反馈问题,可以通过留言版或qq或邮箱反馈。邮箱:hoscen@qq.comQ Q:102287680
  • 1真爱应该被定位为:温柔且有耐心的帮助对方成为更好的人。2不管身处怎样寒冷的冬季,只要想到你,心里就会不禁的温暖四起。3让我们每天带着希望出门,如果事与愿违,就再把希望带回家,休息休息,明天继续带出门。4我也太孤单了吧,连个偏旁部首都没有。5人间星火,竟无半点属于我。6如果总想着以后会遇到更好的人,那我们的相遇就毫无意义。7喜欢是晨曦前的朝露,喜欢是清风拂过山间,喜欢是想要触碰却收回的双手。8世间一切皆可努力,唯独相爱全凭运气。