网站建设|天天操天天拍|营销型网站|天天操天天看|独立站搭建|天天操天天干天天爽|外贸网站建设|wordpress独立站|小程序开发-?无双建站?

Menu

移動(dòng)端頁(yè)面與PC端頁(yè)面開(kāi)發(fā)的布局區(qū)別

網(wǎng)站建設(shè) 錄入時(shí)間 2022-03-02 閱讀次數(shù) 無(wú)雙建站

移動(dòng)端與PC端頁(yè)面布局區(qū)別

視口

視口是移動(dòng)設(shè)備上用來(lái)顯示網(wǎng)頁(yè)的區(qū)域,一般會(huì)比移動(dòng)設(shè)備可視區(qū)域大,寬度可能是980px或者1024px,目的是為了顯示下整個(gè)為PC端設(shè)計(jì)的網(wǎng)頁(yè),這樣帶來(lái)的后果是移動(dòng)端會(huì)出現(xiàn)橫向滾動(dòng)條,為了避免這種情況,移動(dòng)端會(huì)將視口縮放到移動(dòng)端窗口的大小。這樣會(huì)讓網(wǎng)頁(yè)不容易觀看,可以用 meta 標(biāo)簽,name=“viewport ” 來(lái)設(shè)置視口的大小,將視口的大小設(shè)置為和移動(dòng)設(shè)備可視區(qū)一樣的大小。

設(shè)置方法如下( 快捷方式:meta:vp + tab ):


......

......

pc端與移動(dòng)端渲染網(wǎng)頁(yè)過(guò)程:

移動(dòng)端頁(yè)面與PC端頁(yè)面開(kāi)發(fā)的布局區(qū)別

視網(wǎng)膜屏幕(retina屏幕)清晰度解決方案

視網(wǎng)膜屏幕指的是屏幕的物理像素密度更高的屏幕,物理像素可以理解為屏幕上的一個(gè)發(fā)光點(diǎn),無(wú)數(shù)發(fā)光的點(diǎn)組成的屏幕,視網(wǎng)膜屏幕比一般屏幕的物理像素點(diǎn)更小,常見(jiàn)有2倍的視網(wǎng)膜屏幕和3倍的視網(wǎng)膜屏幕,2倍的視網(wǎng)膜屏幕,它的物理像素點(diǎn)大小是一般屏幕的1/4,3倍的視網(wǎng)膜屏幕,它的物理像素點(diǎn)大小是一般屏幕的1/9。

圖像在視網(wǎng)膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣,但是由于視網(wǎng)膜屏幕的物理像素點(diǎn)比一般的屏幕小,圖像在上面好像是被放大了,圖像會(huì)變得模糊,為了解決這個(gè)問(wèn)題,可以使用比原來(lái)大一倍的圖像,然后用css樣式強(qiáng)制把圖像的尺寸設(shè)為原來(lái)圖像尺寸的大小,就可以解決模糊的問(wèn)題。

清晰度解決過(guò)程示意圖:

移動(dòng)端頁(yè)面與PC端頁(yè)面開(kāi)發(fā)的布局區(qū)別

背景圖強(qiáng)制改變大小,可以使用background新屬性

background新屬性

background-size:

length:用長(zhǎng)度值指定背景圖像大小。不允許負(fù)值。

percentage:用百分比指定背景圖像大小。不允許負(fù)值。

auto:背景圖像的真實(shí)大小。

cover:將背景圖像等比縮放到完全覆蓋容器,背景圖像有可能超出容器。

contain:將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等,背景圖像始終被包含在容器內(nèi)。

適配布局類(lèi)型

PC及移動(dòng)端頁(yè)面適配方法

設(shè)備屏幕有多種不同的分辨率,頁(yè)面適配方案有如下幾種:

1、全適配:響應(yīng)式布局+流體布局

2、移動(dòng)端適配:

流體布局+少量響應(yīng)式

基于rem的布局

流體布局

流體布局,就是使用百分比來(lái)設(shè)置元素的寬度,元素的高度按實(shí)際高度寫(xiě)固定值,流體布局中,元素的邊線無(wú)法用百分比,可以使用樣式中的計(jì)算函數(shù) calc() 來(lái)設(shè)置寬度,或者使用 box-sizing 屬性將盒子設(shè)置為從邊線計(jì)算盒子尺寸。

calc()

可以通過(guò)計(jì)算的方式給元素加尺寸,比如: width:calc(25% - 4px);

box-sizing

1、content-box 默認(rèn)的盒子尺寸計(jì)算方式

2、border-box 置盒子的尺寸計(jì)算方式為從邊框開(kāi)始,盒子的尺寸,邊框和內(nèi)填充算在盒子尺寸內(nèi)

響應(yīng)式布局

響應(yīng)式布局就是使用媒體查詢的方式,通過(guò)查詢?yōu)g覽器寬度,不同的寬度應(yīng)用不同的樣式塊,每個(gè)樣式塊對(duì)應(yīng)的是該寬度下的布局方式,從而實(shí)現(xiàn)響應(yīng)式布局。響應(yīng)式布局的頁(yè)面可以適配多種終端屏幕(pc、平板、手機(jī))。

相應(yīng)布局的偽代碼如下:

@media (max-width:960px){
 .left_con{width:58%;}
 .right_con{width:38%;}
}
@media (max-width:768px){
 .left_con{width:;}
 .right_con{width:;}
}

基于rem的布局

首先了解em單位,em單位是參照元素自身的文字大小來(lái)設(shè)置尺寸,rem指的是參照根節(jié)點(diǎn)的文字大小,根節(jié)點(diǎn)指的是html標(biāo)簽,設(shè)置html標(biāo)簽的文字大小,其他的元素相關(guān)尺寸設(shè)置用rem,這樣,所有元素都有了統(tǒng)一的參照標(biāo)準(zhǔn),改變html文字的大小,就會(huì)改變所有元素用rem設(shè)置的尺寸大小。

cssrem安裝

cssrem插件可以動(dòng)態(tài)地將px尺寸換算成rem尺寸

下載本項(xiàng)目,比如:git clone https://github.com/flashlizi/cssrem 進(jìn)入packages目錄:Sublime Text -> Preferences -> Browse Packages… 復(fù)制下載的cssrem目錄到剛才的packges目錄里。 重啟Sublime Text。

配置參數(shù) 參數(shù)配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉(zhuǎn)rem的單位比例,默認(rèn)為40。 max_rem_fraction_length - px轉(zhuǎn)rem的小數(shù)部分的更大長(zhǎng)度。默認(rèn)為6。 available_file_types - 啟用此插件的文件類(lèi)型。默認(rèn)為:[".css", “.less”, “.sass”]。

移動(dòng)端頁(yè)面布局

1、結(jié)合流體布局和響應(yīng)式布局制作天天生鮮移動(dòng)端首頁(yè)頁(yè)面

2、使用基于rem的布局方式制作天天生鮮移動(dòng)端首頁(yè)頁(yè)面

天天生鮮首頁(yè)效果圖如下:

移動(dòng)端頁(yè)面與PC端頁(yè)面開(kāi)發(fā)的布局區(qū)別


【版權(quán)聲明】:本站內(nèi)容來(lái)自于與互聯(lián)網(wǎng)(注明原創(chuàng)稿件除外),供訪客免費(fèi)學(xué)習(xí)需要。如文章或圖像侵犯到您的權(quán)益,請(qǐng)及時(shí)告知,我們第一時(shí)間刪除處理!謝謝!

無(wú)雙科技
如何獲取外貿(mào)詢盤(pán)和訂單?
網(wǎng)站建設(shè)咨詢:13534259410

經(jīng)典客戶案例展示

熱門(mén)服務(wù)
眾多企業(yè)的選擇

深圳無(wú)雙科技 - 專(zhuān)注于高端網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)開(kāi)發(fā)、品牌網(wǎng)站制作

咨詢電話:13534259410

售后服務(wù):13534259410  (7×24小時(shí))
在線 Q Q:253849310 (售前咨詢)

深圳網(wǎng)站建設(shè)咨詢
【掃一掃咨詢】
  • 掃一掃 在線咨詢
    無(wú)雙科技官方公眾號(hào)
  • 響應(yīng)式客戶端
    掃一掃 關(guān)注好友
體驗(yàn)創(chuàng)新服務(wù)

深圳無(wú)雙科技,專(zhuān)注于深圳網(wǎng)站建設(shè)、深圳網(wǎng)站設(shè)計(jì)、深圳網(wǎng)站制作。
服務(wù)客戶超3000家,一站式網(wǎng)站建設(shè)及推廣營(yíng)銷(xiāo)解決方案提供商。
我們的價(jià)值觀:誠(chéng)信、坦誠(chéng)、盡責(zé)、創(chuàng)新。期待與您合作!

您好,很高興為您服務(wù) ^_^
主站蜘蛛池模板: 陕西筱润智能科技有限公司 干部人事智能档案柜 智能密集架 智能档案柜 部队选层文件智能柜 智能枪弹柜 财务智能档案柜 边防武警智能密集架 医院智能档案柜 部队选层文件智能柜智能枪弹柜 学校医院文件柜 企事业单位公检法智能文件柜 生产厂家-筱润智能科技有限公司 RFID射频智能密集架 全自动智能选层档案柜 智能密保柜 枪柜部队营房营具床桌椅办公家具 办公用品档案盒设备货架 全自动智能选层柜生产厂家-筱润智能科技有限公司 | 正规网上赚钱网站「百赚网」专注在家赚钱的网络赚钱平台 | 网咖网址导航,网咖分类目录,网址目录,免费收录国内外、各行业优秀网站网站。 | 上海物流公司_上海冷链运输_空运_电商仓储配送电话-迈泽物流 | 振动筛|不锈钢振动筛|振动筛生产厂家-新乡市大汉振动机械有限公司 | 瑞凯科技,吉林省瑞凯科技,吉林省瑞凯科技股份有限公司 | 全国家博会_2025家博会时间表_家博会门票_免费索票入口 | 均高生物科技(上海)有限公司-二十年专注于均质·乳化·粉碎·分散工艺 | 水溶肥料-大量元素水溶肥-含氨基酸水溶肥料-高塔复合肥-水溶肥生产厂家-河南中黄特肥科技有限责任公司 | 绝缘油介电强度测试仪|d33压电测试仪|准静态d33压电测量仪厂家直销-上海蓝巢电气有限公司【官网】 | 黑料网 - 黑料大事记-黑料门 黑料社最新 今日黑料 热门黑料 最新反差免费-黑料网今日黑料首页_黑料网 - 黑料大事记-黑料门 黑料社最新 今日黑料 热门黑料 最新反差免费-黑料网今日黑料首页 | 冷库出租_食品/医药冷库租赁_冷库改建/定制-北京亚冷 | 液压支架配件|液压支架立柱|液压支架千斤顶|液压支架换向阀|液压支架乳化油|液压支架密封件-山东卓力生产厂家 | 名嘉宴会【官网】_宁波冷餐_宁波茶歇_宁波酒会_宁波自助餐_宁波盛世名嘉宴会服务有限公司 | 深圳办公室装修_高端写字楼设计费用_企业装修报价公司-深圳长红装饰 | 泥浆振动筛|卧式泥浆搅拌器|泥浆离心机|泥浆处理固控设备_沧州宏宇石油机械有限公司 | 青州市科信水处理设备有限公司-ic卡水处理设备厂家-畜牧养殖水处理设备 | 南通出国劳务公司-如东海外经济技术合作有限公司-启东,海门,如皋,海安出国劳务 | 武汉印刷厂_为企业提供宣传单页彩页印刷_武汉折页印刷_海报设计印刷与制作 - 武汉泽雅印刷公司 | 河卵石制砂机|鹅卵石制砂机-移动制砂机-制砂设备-郑州秦星机械设备有限公司 | 新余市国信融资担保有限公司 | 医盟网-全国首家医疗信息化行业门户网站 | 全地形消防摩托车_背负式细水雾_全氟己酮灭火装置「斯库尔消防」 | 土石_泥石分离机_无轴滚筒筛_振动筛 - 巩义市鑫利重工机械制造有限公司 | 食用油灌装机-油类食用油灌装设备-液体灌装机_青州市惠联灌装机械 | 硫酸、硫酸铵、氯磺酸、氯化亚砜、硫酸钾、对位酯生产销售 - 河北和合化工有限公司 | 水热反应釜厂家_水热反应釜价格_水热合成反应釜批发-仪贝尔仪器 - 水热釜,水热反应釜,水热反应釜厂家,水热反应釜价格,水热反应釜型号,水热反应釜内衬,水热反应釜25ml,水热反应釜50ml,水热反应釜100ml,水热合成反应釜 | 军用笔记本电脑_三防加固笔记本电脑_平板型全坚固计算机-集海卫通 | 三安光电股份有限公司 | 南京叉车|电瓶叉车|电动叉车|电动堆高车|电动搬运车-南京诺嘉机械 | 鲜淘网 - 精选全球水果蔬菜肉食海产生鲜,酒水食品零食加盟供求信息 | 硬度计,里氏硬度计,布氏硬度计,高强螺栓检测仪,平板导热仪,专业无损检测仪器商-北京时代新天测控技术有限公司-北京时代新天测控技术有限公司 | 赛车微信群二维码平台下载【找群网zhaoqun5.com】 | 秦皇岛天视影像有限公司,宣传片创意拍摄制作,商业广告拍摄公司,影视影像服务商 - 秦皇岛天视影像有限公司,宣传片创意拍摄制作,商业广告拍摄公司,影视影像服务商 秦皇岛市信恒电子科技有限公司 秦皇岛市华谊彩印有限公司 | 连接器-连接线-连接器厂家-鑫鹏博20年高品质连接器生产厂家 | 智慧环保大数据云平台_车载走航式扬尘/恶臭/噪声污染源在线监测管控信息系统平台_环保土壤/环境监测系统云平台-奥斯恩智能科技 | 铝合金百叶窗_西安百叶窗厂家-西安市未央区通达建材物资部 | 液压尾管悬挂器,机械式尾管悬挂器价格,石油套管扶正器厂家,连续油管悬挂器,高压双塞水泥头,免钻塞注水泥分级箍,单塞套管水泥头价格,弹性套管扶正器,铸铝钢性扶正器,钢性套管扶正器厂家 | 上海专升本-上海统招专升本网| 微孔板恒温振荡器-超声波探伤试块-微孔板迷你离心机-南京互川电子有限公司 | 压力试验机,万能试验机-北京大地华宇仪器设备有限公司 官网 |