移动端布局

移动端响应式的处理:

  1.设计师给前端的是640px效果图;

  2.按照640px尺寸将所有图片切出来;

  3.布局的时候宽度不设置固定宽度;

  4.其余的除了宽度都可以按照效果图的一半来布局.

   比如:1.效果图上的文字是24px,我们布局的时候写成12px;

      2.效果图上的高度是100px,我们布局的时候写50px.

               3.配图以及缩略图的宽高都可以固定.

   5.如果需要调整不同尺寸显示效果的话,用@media进行调整.

在ios看到100*100,实际上原图是200*200.  

比如外面最大的盒子的内填充是20px,需要设置成10px

时间: 2024-08-04 19:38:18

移动端布局的相关文章

移动端布局解决方案+神器

godcss 移动端布局终极解决方案+神器--- 让移动端布局开发更加容易 http:/www.github.com/godcss/ 介绍 godcss不是一个库,也不是一个框架.它是一个移动端布局开发解决方案.使用godcss可以让移动端布局开发更容易. 使用动态的HTML根字体大小和动态的viewport scale. 遵循视觉一致性原则.在不同大小的屏幕和不同的设备像素密度下,让你的页面看起来是一样的. 不仅便捷了你的布局,同时它使用起来异常简单.可能你会说 talk is cheap,s

响应式布局和移动端布局

响应式布局就是响应式设计方案呈现的效果.具体就是页面的布局会根据不同设备的显示面积(主要是宽度)的不同而呈现不同的布局,这个效果是比弹性的布局更好的地方是样式会主动地根据用户的设备的显示面积呈现的布局更灵活,可读性更强.当然对研发的要求也更高(比如说如何更好地让图片,适配,UI动画自适应各种布局).响应式设计一般来说是一套设计方案解决所有的设备的自适应问题.对应的样式文件可能是多个,也可以只写一个(在一个css文件声明不同的media query就可以). 移动端布局就是传统的固定宽度或者弹性布

移动端布局方案 网易

移动端布局: rem方案:页面中的任何元素都采用rem布局,包括字体. 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <me

移动端布局Demo测试

上两张图自勉一下(来自刘墉先生的文章,最近看他的作品):然后移动端该愈来愈受到重视,未来的市场我不知道,不过我知道手机的功能越来越强大是不争的事实!移动端布局的积累也需要从现在做起!                                需求一:实现下图效果,注意不同手机的型号:原生称为适配,我们称为自适应不变形 思路一:btn+ima布局风格 <div class="row margin-top"> <div class="col-sm-12&qu

移动端布局使用哪种单位比较好?

关于移动端布局使用哪种单位,每个人都有自己习惯使用的单位,这个也只是我个人的一点点浅见. 欢迎大家指点. 很多人在谈到写移动端页面的时候,都觉得很恼火.因为要写n套css样式.然后用媒体查询做适配. 一般这个时候我都表示自己懵懵哒,搞不懂为什么要写这么多套.可能是由于我经验不够,所以看不出来写这么多套有什么深意. 我认为在移动端可以做到适配不同的手机分辨率,如果只是保持整体缩放,没有设计上的差异可以不需要用到`media query`. 下面说说我习惯使用的单位:em,rem,% 1.em em

移动端布局总结

最近做了几个移动端的项目,因为第一次接触移动端的布局,所以踩了几个坑,今天总结一下,有不对的地方欢迎大家提意见. 移动端布局需要考虑为不同分辨率的设备都提供一个出色的使用体验,下面我来总结一下移动端布局的方法. 借助库 比如Bootstrap和MUI都可以实现自适应布局,借助于他们定义好的样式,我们很少需要自己重新写样式,节省了大量的开发时间,推荐使用.在样式不能满足要求的情况下,再自己重写样式. 允许网页宽度自动调整 首先要想自适应必须加入一行viewport标签: <meta name=&quo

rem与移动端布局

移动端布局痛点在:兼容各个分辨率的移动设备,同样是手机,iPhone4-iPhoneX分辨率范围就已经很广:如果使用px进行布局,显然会出现问题: 常见的像素单位px,em,rem中,em是相对于父元素font-size的单位,个人认为在使用中,em会比较混乱:rem相对的是根元素.HTML,便于根据屏幕分辨率进行布局: 目前移动端布局采用的方式:  “横向百分比 + 纵向rem”,同时使用flex布局,媒体查询: https://www.cnblogs.com/ysshuai/p/669433

vw结合rem实现移动端布局

继上一篇<媒体查询结合rem实现移动端布局>的改进! 还是以昨天写的页面为例 上一回说到了媒体查询结合rem做移动端布局,步骤如下 首先设置媒体查询,确定html中font-size值的变化 @media all and (max-width:320px){ html{font-size:12px;} } @media all and (min-width:321px) and (max-width:375px){ html{font-size:14px;} } @media all and

精通移动端布局 - 概念篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念    物理像素    设备独立像素    CSS 像素    PPI的概念    DPR的概念    缩放的概念    viewPort 的概念    viewport 渲染流程    Meta 标签说明 移动端布局实践    混合方式    REM 方式        响应式        JS自动换

精通移动端布局 - 实践篇 -

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念    物理像素    设备独立像素    CSS 像素    PPI的概念    DPR的概念    缩放的概念    viewPort 的概念    viewport 渲染流程    Meta 标签说明 移动端布局实践    混合方式    REM 方式        响应式        JS自动换