简单几步做响应式

时间:2021-10-28 来源:未知网络 作者:996建站网

移动端做响应式的框架用的比较多的就是bootstrap,但是有些项目拿框架做反而没有自己写来得方便,拿我最近在做的一个项目来说,自己写也就几步搞定了响应式,先上设计稿的一部分

简单几步做响应式插图<img data-rawheight="1556" data-rawwidth="1200" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”1200″ data-original=”https://pic1.zhimg.com/v2-c2ba2fec6c710561b1bccd998c41acd8_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211028090210-617a6712ccee0.jpg”/>

第一步:分析设计稿

不同的地方:显示的版块有差别,有些版块移动端有显示,pc端不需要显示

共同点:页面的排版布局基本一致,移动端图片在pc端基础同比例缩小,字体大小pc与移动端都一样。

第二步:写移动端代码

以移动端优先原则,所以先编写移动端代码。注意要在页面上加上“<meta name="viewport" content="width=device-width,initial-scale=1.0">”这行代码。

简单几步做响应式插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序